弹性布局flex

父级标签属性设置

display: flex;/*弹性布局*/
flex-direction: row;/*伸缩流方向*/
/*
 row(默认值) 
 row-reverse(反转) 
 column(垂直方向) 
 column-reverse(垂直方向反转)
*/
flex-wrap: nowrap;/*伸缩容器换行*/
/*
 nowrap(默认值)
 wrap(换行) 
 wrap-reverse(反转)
*/
justify-content: space-around; /*主轴对齐*/
/*
 flex-start(左对齐)
 flex-end(右对齐)
 center(居中对) 
 space-between(两端对齐)
 space-around(平均分配)
*/
align-items: stretch;/*侧轴对齐*/
/*
 flex-start(上对齐) 
 flex-end(下对齐) 
 center(居中对齐) 
 baseline(基线对齐) 
 stretch(默认值 填充)
*/

设为弹性布局元素的子集则可以通过设置flex属性改变所占比例

.one{
    flex: 1;
}
.two{
    flex: 2;
}

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			.main{
				display: flex;
				flex-direction: row;/*伸缩流方向 row(默认值) row-reverse(反转) column(垂直方向) column-reverse(垂直方向反转)*/
				flex-wrap: nowrap;/*伸缩容器换行 nowrap(默认值) wrap(换行) wrap-reverse(反转)*/
				justify-content: space-around; /*主轴对齐 flex-start(左对齐) flex-end(右对齐) center(居中对齐) space-between(两端对齐) space-around(平均分配)*/
				align-items: stretch;/*侧轴对齐 flex-start(上对齐) flex-end(下对齐) center(居中对齐) baseline(基线对齐) stretch(默认值 填充)*/
				width: 1000px;
				height: 500px;
				margin: 0px auto;
				background: lightblue;
			}
			.main div{
				margin: 10px;
				width: 100px;
				height: 50px;
				background:lightcoral;
				/* border:1px solid black; */
				color: white;
				text-align: center;
				line-height: 50px;
			}
			/* .one{
				flex: 1;
			}
			.two{
				flex: 1;
			}
			.three{
				flex: 1;
			}
			.four{
				flex: 1;
			}
			.five{
				flex: 1;
			} */
		</style>
	</head>
	<body>
		<div class="main">
			<div class="one">1</div>
			<div class="two">2</div>
			<div class="three">3</div>
			<div class="four">4</div>
			<div class="five">5</div>
		</div>
	</body>
</html>

猜你喜欢