弹性盒子语法介绍

什么是Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，它具有定义一个可伸缩项目的能力。

定义一个弹性盒子

任何一个容器都可以指定弹性盒子。

display: flex;

值flex会使弹性容器成为块级元素。

display: inline-flex;

值inline-flex会使弹性容器成为单个不可分的行内元素。

注意：厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：display : -webkit-flex。

浏览器兼容性

基本概念

弹性容器(Flex container)

包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。

弹性项目(Flex item)

弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

轴(Axis)

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

• flex-direction 确立主轴。
• justify-content 定义了在当前行上，弹性项目沿主轴如何排布。
• align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。
• align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。

方向(Direction)

弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。

• order 属性将元素与序号关联起来，以此决定哪些元素先出现。
• flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。

行(Line)

根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

尺寸(Dimension)

根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。

• min-height 与 min-width 属性初始值将为 0。
• flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写，描述弹性项目的整体的伸缩性。

容器属性

以下6个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

flex-direction: row | row-reverse | column | column-reverse;

• row(default): (主轴为水平方向，起点在左端。)

• row-reverse: (主轴为水平方向，起点在右端。)

• column: (主轴为垂直方向，起点在上沿。)

• column-reverse: (主轴为垂直方向，起点在下沿。)

flex-wrap

默认情况下，弹性项目都排在一条直线上，该属性定义了如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

• nowrap(default): (不换行)

弹性容器宽度是500px，弹性项目宽度设置为100px，此处并没有换行，而是把项目容器压缩了。

• wrap: (换行，而且第一行在上方)

• wrap-reverse: (换行，但是第一行在下方)

flex-flow

该属性是flex-direction和flex-wrap的简写，默认为flex-flow: row nowrap;

jusitfy-content

该属性定义了在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

• flex-start(default): (左对齐)

• flex-end: (右对齐)

• center: (居中)

• space-between: (两端对齐，项目中间间隔相等)

• space-around: (每个项目两侧间隔相等)

align-items

该属性定义项目交叉轴（纵轴）上如何对齐，以下叫纵轴，方便理解。

align-items: flex-start | flex-end | center | baseline | stretch;

• stretch(default): (如果没有设置高度或者设置为auto，会占满整个容器高度)

• flex-start: (纵轴起点对齐)

• flex-end: (纵轴终点对齐)

• center: (纵轴中点对齐)

• baseline: (项目第一行文字的基线对齐)，对基线基线不了解的可以看这篇文章

align-content

该属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• stretch(default): (轴线占满整个纵轴)

• flex-end: (纵轴起点对齐)

• flex-end: (纵轴终点对齐)

• center: (纵轴中点对齐)

-space-between: (与交叉轴两端对齐，轴线之间的间隔平均分布)

• space-around: (每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍)

项目属性

以下6个属性设置在容器上。

• order
• flex-grow
• flex-flow
• flex-shrink
• flex
• align-self

order

该属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <interer>;
}

flex-grow

该属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

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

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

flex-shrink

该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

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

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

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex

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

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

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。