CSS弹性盒模型

原创 MMJC6 随笔 css 255阅读 2017-12-08 12:03:16 举报

只记录容器和内部项目的各项属性

容器:指定为容器:display:flex;
1.flex-direction:主轴方向,即项目的排列方向,默认为row
row row-reverse column column-reverse
2.flex-wrap:项目如果一行排不开的换行方式 ,默认为nowrap
wrap:换行 wrap-reverse 第一行在下方 nowrap
3.flex-grow:flex-direction和flex-wrap的简写新式,默认是row nowrap

4.justify-content:项目在主轴上的对齐方式,默认为左对齐 flex-start
flex-start flex-end center space-between两端对齐 spacearound每个项目两边的间隔相等
5.align-items:项目在交叉轴上的对齐方式,默认为stretch如果未设置高度或高度为auto,则充满整个容器的高度
flex-start交叉轴的起点对齐 flex-end交叉轴的终点对齐 center:中点对齐 baseline第一行文字的基线对齐 stretch充满
6.align-content:多根轴线的对齐方式,如果只有一条轴线,则不起作用 默认为stretch默认平均分配交叉轴空间,充满
flex-start flex-end center space-between space-around

项目
1.order 项目的排列顺序 ,数值越小,排列越靠前 默认为0

2.flex-grow 项目的放大比例,默认为0,即有剩余空间也不放大
都设置为1,则等分剩余空间,如果一个为2,其余为1,则为2的分得的空间是其他项目的2倍
3.flex-shrink 项目的缩小比例,默认为1,即空间不足就会缩小
如果为0,则不缩小
4.flex-basis 项目在分配多余空间之前的主轴空间。浏览器根据这个属性来计算是否有剩余空间
5.flex:是flex-grow,flex-shrink,flex-basis的简写,默认为0 1 auto,后两项可以缺省。
有两个快捷值:auto 1,1,auto 随剩余空间放大缩小
none 0,0,auto 不放大缩小

6.align-self 允许项目拥有和其他项目不一样的在交叉轴的对齐方式 默认值为auto ,继承容器元素的align-items
可以覆盖容器的align-items

[/p]

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

赶紧努力消灭 0 回复