html5-伸缩布局flex
2019-08-27 本文已影响0人
AssertDo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 1000px;
height: 200px;
border: 1px solid red;
box-sizing: border-box;
/*设置父容器为伸缩盒子：会使每一个子元素自动变成伸缩项*/
display: flex;
/*设置子元素的排列方式
flex-start:让子元素从父容器的起始位置开始排列
flex-end:让子元素从父容器的结束位置开始排列
center:让子元素从父容器的中间位置开始排列
space-between:左右对齐父容器的开始和结束，中间平均分页，产生相同的间距
space-around:将多余的空间平均的分页在每一个子元素的两边 margin:0 auto.造成中间盒子的间距是左右两边盒子间距的两倍*/
justify-content: space-around;
}
.first{
width: 200px;
height: 100%;
background-color: red;
}
.second{
width: 200px;
height: 100%;
background-color: green;
}
.third{
width: 200px;
height: 100%;
background-color: blue;
}
.fourth{
width: 200px;
height: 100%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
</div>
</body>
</html>
