<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局:伸缩盒子flex</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 900px;
height: 600px;
border: 1px solid red;
box-sizing: border-box;
margin: 0 auto;
/* 设置父容器为伸缩盒子，让每个子元素自动变成伸缩项
当子元素的宽度和>父容器宽度，子元素会自动平均收缩。
*/
display: flex;
/* 设置子元素的主轴方向的排列方式：调整内容
flex-start：从左到右排列
flex-end：从父容器右边到左边
center:让子元素从父元素的中间位置开始排列
space-between:左右与父容器的左右对齐，中间产生同等的间距
space-around:将多余的空间，平均的分在每个子元素的两边，类似magin + auto
*/
justify-content: space-around;
/* 是flex-warp和flex-direction的综合
flex-warp：控制子元素是否换行显示，默认不换行
nowarp:不换行--收缩
warp：换行--不收缩
warp-reverse：翻转，原来从上到下，反转后从下到上排列。
*/
flex-flow: wrap;
/* flex-direction：设置子元素的排列方向：就是主轴方向，默认主轴方向是row
row：水平排列方向，方向从左到右。
row-reverse:水平排列方向，从右到左
column：垂直排列方向，从上到下
column-reverse：垂直排列方向，从下到上。
*/
flex-direction: column;
}
.first {
width: 200px;
height: 200px;
background-color: red;
}
.second {
width: 200px;
height: 200px;
background-color: yellow;
}
.third {
width: 200px;
height: 200px;
background-color: green;
}
.fourth {
width: 200px;
height: 200px;
background-color: blue;
}
.fifth {
width: 200px;
height: 200px;
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 class="fifth">5</div>
</div>
</body>
</html>