公共课-弹性盒子布局

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

一、容器的属性

第一步：设置父元素为弹性容器：display:flex;

当子元素的宽度和大于父元素时，回自动调整宽度，不会超出父元素

1、子元素的排列方向

默认水平从左到右，属性row

属性：

flex-direction

属性值：

row：水平从左到右

row-reverse:水平从右到左

column:从上到下

column-reverse:从下到上

2、子元素换行

默认情况下不会换行，而是减小子元素的宽度

属性：

flex-wrap

属性值：

nowrap:不换行

warp:换行

wrap-reverse:从下开始排列，换行且反转

3、子元素水平分布

属性：

justify-content

属性值:

flex-start:从左到右

flex-end:从右到左

center:水平居中

space-between:两端对齐，项目之间的间隔都相等

space-around:每个项目两侧的间隔相等

4、子元素垂直分布

属性值：

align-items

属性值：

flex-start:从上到下

flex-end:从下到上
center:居中

详细内容：https://www.runoob.com/w3cnote/flex-grammar.html