css弹性布局

表格布局

display:table-cell;

浮动布局

对自身影响，脱离文档流,使元素独立起来并且可以设置宽高

对兄弟元素影响，改变兄弟元素布局

对父容器影响是造成坍塌

定位布局

固定布局，使用标准px单位
流式布局，使用百分比

多列布局

column-width:自适应列宽

弹性布局

display: flex; 弹性盒模型，默认主轴方向是x轴，起始线是左边开始
flex-direction 改变主轴方向，row x轴为主轴，colum n y轴为主轴，
row/column-reverse反转
flex-wrap: wrap;默认是nowrap不换行，子元素在父元素中换行
flex-flow伸缩流，包含伸缩流换行和方向

align-items: center;设置侧轴上居中
align-self: flex-end;设置元素在侧轴的位置

order:设置子元素出现的顺序，默认值是0，设置的值越小就最先出现在前面。

justfy-content

flex-start:默认值，伸缩项目从容器的最左侧开始排布
flex-end:伸缩项目从容器的最右侧开始排布
center:伸缩项目位于容器的中心
space-between:伸缩项目位于各行之间留有空白的容器内部，注意:从两边开始，然后中间的每一个间隔 之间都有空白。
space-around:伸缩项目均匀的分布在中间，然后每一个伸缩项目左右留白
space-evenly平均分配剩余空间