Flex布局

Flex布局

Flex是Flexible Box的缩写,意为”弹性布局“。可用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。注意兼容Webkit内核的浏览器。

.box {
    display: -webkit-flex;
    display: flex;
}
1
2
3
4
.inline_box {
    display: -webkit-inline-flex;
    display: inline-flex;
}
1
2
3
4

设为Flex布局之后,子元素的floatclearvertical-align属性会失效。

Flex布局的基本概念

Flex容器(flex container):采用Flex布局的元素。

Flex项目(flex item):Flex容器中的所有子元素。

容器默认存在两条轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。

  • 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫main end

  • 交叉轴的开始位置叫做cross start,结束位置叫cross end

Flex布局的基本概念

Flex容器的属性

Flex容器有以下的常见属性。

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

flex-direction

flex-direction属性决定主轴的方向,即项目的排列方向。

flex-direction属性有以下4个可选值。

  • row:默认值。主轴为水平方向,起点在左端

  • row-reverse:主轴为水平方向,起点在右端

  • column:主轴为垂直方向,起点在上沿

  • column-reverse:主轴为垂直方向,起点在下沿

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
1
2
3

flex-direction

flex-wrap

默认情况下,flex items都排在一条轴线上。flex-wrap属性用于定义如果一条轴线排不下时items如何换行

flex-wrap属性有以下3个可选值。

  • nowrap:默认值。不换行。

  • wrap:换行,第一行在上方。

  • wrap-reverse:换行,第一行在下方。

.box{
    flex-wrap: nowrap | wrap | wrap-reverse;
}
1
2
3

flex-wrapnowrap

nowrap

flex-wrapwrap

wrap

flex-wrapwrap-reverse

wrap-reverse

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

.box {
    flex-flow: <flex-direction> || <flex-wrap>;
}
1
2
3

justify-content

justify-content属性定义了flex items在主轴上的对齐方式

justify-content属性有以下5个可选值,具体对齐方式与主轴的方向有关。下面假设主轴为水平从左到右。

  • flex-start:默认值。左对齐。

  • flex-end:右对齐。

  • center:居中。

  • space-between:两端对齐,item之间的间隔相等。

  • space-around:每个item两侧的间隔相等。

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}
1
2
3

justify-content

align-items

align-items属性定义items在交叉轴上如何对齐

align-items属性有以下5个可选值,具体对齐方式与交叉轴的方向有关。下面假设交叉轴为垂直从上到下。

  • flex-start:与交叉轴的起点对齐。

  • flex-end:与交叉轴的终点对齐。

  • center:与交叉轴的中点对齐。

  • baseline:item的第一行文字的基线对齐。

  • stretch:默认值。如果item未设置具体高度值或auto,将占满整个容器的高度。

.box {
    align-items: flex-start | flex-end | center | baseline | stretch;
}
1
2
3

align-items

align-content

align-content属性定义了多条轴线的对齐方式。如果Flex项目中只有一条轴线,该属性不起作用。

align-content属性有以下6个可选值。

  • flex-start:与交叉轴的起点对齐。

  • flex-end:与交叉轴的终点对齐。

  • center:与交叉轴的中点对齐。

  • space-between:与交叉轴的两端对齐,轴线之间的间隔平均分布。

  • space-around:每条轴线两侧的间隔都相等。

  • stretch:默认值。轴线占满整个交叉轴。

.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
1
2
3

align-content

Flex项目的属性

Flex项目有以下的常见属性。

  • order

  • flex-grow

  • flex-shrink

  • flex-basis

  • flex

  • align-self

order

order属性定义item的排列顺序。数值越小,排列越靠前,默认为0。

.item {
    order: <integer>; /* default 0 */
}
1
2
3

order

flex-grow

flex-grow属性定义item的放大比例,默认为0(即就算存在剩余空间,也不会放大)。

.item {
    flex-grow: <number>; /* default 0 */
}
1
2
3

flex-grow

如果所有的item的flex-grow属性都为1,则它们将等分剩余空间。如果一个item的flex-grow属性为2,其他item都为1,则前者占据的剩余空间将比其他项多一倍。

flex-shrink

flex-shrink属性定义了item的缩小比例,默认为1(即如果空间不足,该item将缩小)。

.item {
    flex-shrink: <number>; /* default 1 */
}
1
2
3

flex-shrink

如果所有item的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个item的flex-shrink属性为0,其他item都为1,则空间不足时,前者不缩小。

flex-basis

flex-basis属性定义了在分配多余空间之前,item占据的主轴空间(main size)。

浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即item的本来大小。

.item {
    flex-basis: <length> | auto; /* default auto */
}
1
2
3

此属性可设为跟width或height属性一样的值,如50px,则item将占据固定空间。

flex

flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
1
2
3

该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)。

align-self

align-self属性允许单个item与其他item不一样的对齐方式,可覆盖Flex容器的align-items属性。

此属性的默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

该属性有6个可选值,除了auto,其他都与Flex容器的align-items属性完全一致。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
1
2
3

align-self

参考资料

Flex 布局教程:语法篇

Flex 布局教程:实例篇