接续布局小总结(一)
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 回复