<!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>