float属性定义元素脱离文档流浮动，默认值none,left和right控制元素向左右浮动,值inherit继承父元素的float的属性
float:left; float:right; float:inherit;display:flex称为Flex容器，他的所有子元素自动成为容器成员，称为Flex项目。
display:flex; .box { flex-direction: row | row-reverse | column | column-reverse; } row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿,自上而下。 column-reverse：主轴为垂直方向，起点在下沿,自下而上。 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } nowrap（默认）：不换行,宽度自动压缩。 wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。 justify-content属性定义了项目在主轴上(即横向)的对齐方式。 flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，组件之间的间隔都相等。 space-around：距边界两侧的间隔相等，元素之间的间隔比项目与边框的间隔大一倍。 align-items属性定义项目在交叉轴上(即纵向,垂直)如何对齐。 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。知道了这些常用属性就可以拿来做布局，用class= box的盒子做主体，box下面的div来做内容
html <div class="main"> <div class="box"> <div class="bm-name"> <b>电影</b> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box"><a href=""></a></div> <div class="box"><a href=""></a></div> <div class="box"><a href=""></a></div> <div class="box"><a href=""></a></div> <div class="box"><a href=""></a></div> </div> css //用main当容器让box用felx布局 .main{ flex-wrap: wrap;//换行 height: 8rem; width: 100%; display: flex;//定义容器 justify-content: center;//居中 } .box{ border-radius: 10px; width: 5rem; height: 3rem; margin: 0.2rem .2rem; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); overflow: hidden;//防止内容外溢 } //在box中用float布局实现内容排序 .bm-name{ width: 5rem; height: 0.4rem; text-align: center; font-size: 0.25rem; float: left;//左浮动 } .bm-site{ width: 1.666666rem; min-height: 0.4rem; margin-top: 0.1rem; float: left;//左浮动 text-align: center; font-size: 0.15rem; line-height: 0.4rem; }