<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 400px;height: 400px;
border: 1px solid red;
/* 先把父元素设置成flex(伸缩) */
display: flex;
/* 子元素在主轴方向的对其方式的设置 */
/* justify-content: flex-end; */ /*从右到左 ，默认显示从左到右 */
/* justify-content: center; *//* 中间显示*/
/* justify-content: space-between */ /*两端对齐*/
/* justify-content: space-around */ /*两边空白 环绕式对齐*/
/* 主轴方向作为调整 */
/* flex-direction: row; */ /*主轴水平*/
/* flex-direction: row-reverse; */ /*水平反转*/
/* flex-direction: column; *//*主轴水平方向变成了垂直的方向，侧轴永远是垂直主轴的*/
/* flex-direction: column-reverse; */ /*主轴竖着反转*/
/* 侧轴对齐 */
/* align-items: flex-start; */ /*侧轴开始*/
/* align-items: flex-end; */ /*侧轴底部*/
/* align-items: center; */ /*侧轴居中*/
/* align-items: stretch; */ /*拉伸效果，要想有效果，必须干掉子元素的高度*/
/* 默认子元素没有换行 nowrap*/
flex-wrap: wrap; /*子元素换行*/
/* flex-wrap: wrap-reverse; */ /*反转加换行*/
align-content: flex-start /*子元素换行后有空白行，希望没有空白行，需要重新设置主轴的方向*/
}
.dv1{
width: 100px;height: 100px;
background: red;
margin-left: 5px;
}
.dv2{
width: 100px;height: 100px;
background: blue;
margin-left: 5px;
}
.dv3{
width: 100px;height: 100px;
background: green;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="dv1"></div>
<div class="dv2"></div>
<div class="dv3"></div>
<div class="dv3"></div>
<div class="dv4"></div>
<div class="dv1"></div>
</div>
</body>
</html>