接续布局小总结 (一)
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 布局: 待续......
来源: http://www.qdfuns.com/notes/36713/57956bd68c1f788d8c01f6a227dca937.html