布局的小总结(二)

原创 前端薇薇 随笔 CSS3部分 212阅读 2018-02-03 16:34:03 举报

接续布局小总结(一)

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布局:待续……

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复