day18

1 弹性父元素的属性

设置弹性盒 display:flex

弹性子元素的排列方式和是否允许换行 flex-flow

flex-direction 排列方式

row默认 row-reverse水平翻转 column自上而下 column-reverse 自上而下翻转

flex-wrap 是否允许换行

nowrap 不允许，默认 wrap允许 wrap-reverse允许换行翻转

弹性子元素存在换行 行的控制 align-content

flex-start flex-end center space-between space-around space-evenly

主轴对齐方式 justify-content (自左向右在一排显示，x轴是主轴，自上而下排列，y轴是主轴)

flex-start flex-end center space-between space-around space-evenly

侧轴对齐方式（交叉轴） align-items

flex-start flex-end center baseline

2 弹性子元素的属性

flex-basis 设置弹性子元素的宽度或高度，可以用width、height代替，默认是auto

flex-grow 分配剩余空间 子元素的扩展，默认是0

flex-shrink 是否允许子元素收缩，默认是1，允许 0 不允许

flex 一个值代表分配父元素的宽度

flex是flex-grow flex-shrink flex-basis的缩写，默认是0,1，auto

order 调整弹性子元素的显示顺序，值越大越靠后，可以为负值，但必须是整数

align-self 弹性资源的对齐方式

flex-start flex-end center baseline

3 多列属性

创建多列 column-count

设置多列的空隙 column-gap

设置多列的边框 column-rule

设置多列的标题 column-span

设置多列中断的位置 break-inside