布局的小总结（二）

接续布局小总结（一）

7.flexbox(之前的布局都可用flexbox代替)

1）display：flex
子元素在容器内水平或垂直摆放

1* flex-direction
子元素的排列方向
取值：row,row-reverse,column,column-reverse

2*flex-grow
定义每一个子元素在盒子内的弹性
拓展盒子占满剩余空间的能力
取值：默认0，不占余下空间；
为1，占余下空间

3*flex-shrink
子元素收缩的能力
取值：默认1，可随页面宽度收缩
为0，不随页面宽度收缩

4*flex-wrap:给容器加
元素在主轴方向上排放时，能否换行
取值：nowrap,wrap,wrap-reverse

5*justify-content：给容器加
子元素沿着主轴方向摆放
取值：flex-start,flex-end,center,space-between,space-round

6*align-items：给容器加
在侧轴方向的对齐方式
默认：stretch
取值：flex-start,flex-end,center,baseline,stretch
注意：只有当子元素的height为auto时，stretch才让每个子元素的高度相同，若给子元素单独设置了高度，且高度不等，则stretch无效！！！！

7 align-self:在子元素上设置，可控制单个子元素
取值同6

8*align-content:给容器加
多行内容在容器内侧轴方向的对齐
取值：flex-start,flex-end,center,space-between,space-around,stretch

9*order
指定摆放的顺序，从小到大
取值：默认0

8.Grid布局：待续……