伸缩布局

伸缩布局

父元素属性：

display:

flex;将盒子转化为flex弹性布局盒子

flex-direction：调整主轴方向（默认水平方向 ）可以互换主侧轴：

row：默认水平方向
column：竖直方向
row-reverse：水平反方向
column-reverse：竖直反方向

justify-content：调整主轴方向对齐方式

flex-start：从开始位置对齐，因为有主轴方向随意不能说向左对齐
flex-end：从结束位置对齐
center：居中
space-around：均匀分布
space-between：两端对齐

align-items：调整侧轴方向对齐方式

flex-start：
flex-end：
center：
beseline：以元素的基线作为对齐的标准
stretch：伸缩，当不指定高的时候，高自动伸长

flex-warp：控制是否换行

wrap：换行
nowrap：不换行

align-content：堆栈排列，对flex-wrap后的换行进行控制

flex-start：
flex-end：
center：
space-around：均匀分布
space-between：两端对齐
stretch：

flex-flow：是flex-direction和flex-warp的简写

column wrap
column nowrap
......

子元素的属性

flex：将父盒子剩余的空间进行分配，除去width的部分

1 2 3 ......

align-self：可以覆盖父元素设置的align-items

flex-start
flex-end
center
baseline
stretch

order：

数字大小代表显示的前后顺序
1 2 3