参考阮一峰——Flex 布局教程:语法篇
父容器
启用Flex布局
1 2 3
| display: flex; display: inline-flex; // 行内元素也可以使用 Flex 布局 display: -webkit-flex; // Safari, Webkit 内核的浏览器
|
子元素的float
、clear
和vertical-align
属性将失效。
主轴方向
1
| flex-direction: row | row-reverse | column | column-reverse;
|
换行策略
1
| flex-wrap: nowrap | wrap | wrap-reverse;
|
简写 Of 主轴方向 & 换行策略
1
| flex-flow: <flex-direction> || <flex-wrap>;
|
对齐方式
项目在主轴上的对齐方式
1
| justify-content: flex-start | flex-end | center | space-between | space-around;
|
项目在交叉轴上的对齐方式
1
| align-items: flex-start | flex-end | center | baseline | stretch;
|
多根轴线的对齐方式
1
| align-content: flex-start | flex-end | center | space-between | space-around | stretch;
|
子元素
对齐方式
覆盖父容器中设置的align-items
属性
默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
1
| align-self: auto | flex-start | flex-end | center | baseline | stretch;
|
项目的排列顺序
数值越小,排列越靠前,默认为0。
项目的放大比例
默认为0
,即如果存在剩余空间,也不放大。
其他正值,会将剩余空间按照值的大小进行权值分配
项目的缩小比例
默认为1,即如果空间不足,该项目将缩小。
属性为0,则不缩小
1
| flex-shrink: <number>; // default 1
|
项目占据的主轴空间
它的默认值为auto
,即项目的本来大小。
浏览器根据这个属性,计算主轴是否有多余空间。
1
| flex-basis: <length> | auto;
|
简写 Of 放大比例,缩小比例,占据的主轴空间
默认值为0 1 auto
。后两个属性可选。
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
1
| flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
|