flex弹性盒模型

时间：5年前阅读：5670

1、flex里的项目，总宽度如果不超过父级宽度，那么就正常横向排列（类似于float的效果）

2、flex里的项目，总宽度如果超过父级元素宽度，那么加给项目的宽度就无效了，每个项目的宽度会自动均分（类似于float的效果）

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
	#jrtj{    
		width: 80%;    
		border: 4px solid orangered;    
		height: 500px;    
		margin: 10px auto;    
		/*flex里的项目是不脱离文档流的*/    
		/*指定容器里面的项目排列方式为弹性布局(跟下面的用float: left的效果一样)*/    
		display: flex;    
		/*row横排列，reverse颠倒,反转意思  加reverse就是反过来排*/    
		/*flex-direction:row-reverse;*/    
		/*direction  方向*/    
		flex-direction: row;    
		/*column竖排列 ，加reverse就是反过来排*/    
		/*flex-direction: column;*/    
		/*flex-direction: column-reverse;*/    
		/*（默认是不换行的 nowrap）放不下换行wrap*/    
		flex-wrap: wrap;    
	}    
	#jrtj >div{    
		width: 210px;    
		height: 200px;    
		background: dodgerblue;    
		/*border: 1px solid blue;*/    
		outline: 1px solid blue;    
		/*float: left;*/    
		color: white;    
		font-size: 30px;    
		text-align: center;    
	}    
	</style>    
</head>    
<body>       
<div id="jrtj">    
	<div>1</div>    
	<div>2</div>    
	<div>3</div>    
	<div>4</div>    
	<div>5</div>    
	<div>6</div>    
	<div>7</div>    
	<div>8</div>    
	<div>9</div>    
	<div>10</div>    
	</div>    
</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

flex弹性盒模型

网友评论