Flexbox in CSS

在 CSS 中可使用的 CSS3 Flexbox 特性

#align-content

定义 flexbox 容器中每一行的对齐方式。此属性仅当预先设置了 flex-wrap: wrap 后有效，且 flexbox 的子元素有多行。

默认属性 align-content: stretch;

每一行拉伸平分并填充剩余空间

此示例中，容器高为 300px。 所有的方块高 50px，除了第二个的高度为 100px。

  • 第一行高 100px
  • 第二行高 50px
  • 容器剩余高度 150px

剩余空间被两行平分:

  • 第一行的高度变成了 175px
  • 第二行变成了 125px

align-content: flex-start;

每一行仅仅占用实际所需的空间。所有的元素都将靠纵向轴起始处对齐。

align-content: flex-end;

每一行仅仅占用实际所需的空间。所有的元素都将靠纵向轴末尾处对齐。

align-content: center;

每一行仅仅占用实际所需的空间。所有的元素都将靠纵向轴中间对齐。

align-content: space-between;

每一行仅仅占用实际所需的空间。剩余空间占据行之间。

align-content: space-around;

每一行仅仅占用实际所需的空间。剩余空间平均分配给行元素之间（上下）。

#align-items

定义了在 flexbox 容器的一行内，子元素在纵向轴的对齐方式。

align-items: flex-start;

flexbox 的子元素按照纵向轴的起始处对齐。

默认，纵向轴是垂直的，所以这就意味着 flexbox 的子元素对齐于垂直方向的顶部。

align-items: flex-end;

flexbox 的子元素按照纵向轴的末尾处对齐。

默认，纵向轴是垂直的，所以这就意味着 flexbox 的子元素对齐于垂直方向的底部。

align-items: center;

flexbox 的子元素按照纵向轴的中间对齐。

默认，纵向轴是垂直的，所以这就意味着 flexbox 的子元素对齐于垂直方向的中间。

align-items: baseline;

flexbox 的子元素按照纵向轴的 baseline 对齐。

默认，纵向轴是垂直的，所以这就意味着 flexbox 的子元素对齐于以自身文字为横向水平线的baseline。

align-items: stretch;

flexbox 的子元素将拉伸覆盖整个纵向轴。

默认，纵向轴是垂直的，所以这就意味着 flexbox 的子元素将填满整个纵向的空间。

#align-self

原理如同 align-items，但是仅仅作用于一个 flexbox 元素，而不是作用于所有的元素

默认属性 align-self: auto;

元素使用 align-items 的值。

align-self: flex-start;

如果容器有属性 align-items: center 且 目标元素 有属性 align-self: flex-start，那么仅仅目标元素对齐于纵向轴的起始处。

默认，这就意味着元素对齐于垂直方向的顶部。

align-self: flex-end;

如果容器有属性 align-items: center 且 目标元素 有属性 align-self: flex-end，那么仅仅目标元素对齐于纵向轴的末尾处。

默认，这就意味着元素对齐于垂直方向的底部。

align-self: center;

如果容器有属性 align-items: flex-start 且 目标元素 有属性 align-self: center，那么仅仅目标元素对齐于纵向轴的中间。

默认，这就意味着元素对齐于垂直方向的中间。

align-self: baseline;

如果容器有属性 align-items: center 且 目标元素 有属性 align-self: baseline，那么仅仅目标元素对齐于纵向轴的 baseline。

默认，这就意味着元素沿着文字的 baseline 对齐。

align-self: stretch;

如果容器有属性 align-items: center 且 目标元素 有属性 align-self: stretch，那么仅仅目标元素拉伸填充于整个纵向轴。

#flex-basis

定义 flexbox 的初始化大小。

默认属性 flex-basis: auto;

元素根据自身的内容自动调整大小，或者根据已定义的 高度 或 宽度 调整大小。

flex-basis: 80px;

你可以定义 pixel 或 (r)em 值。元素将换行其内容避开任何的元素溢出。

#flex-direction

定义了元素在 flexbox 容器中的排序方式。

默认属性 flex-direction: row;

元素按照与文字方向（书写模式）相同的方向，沿着主（横）轴。

flex-direction: row-reverse;

元素按照与文字方向（书写模式）相反的方向，沿着主（横）轴。

flex-direction: column;

元素按照与文字方向（书写模式）相同的方向，沿着纵向轴。

flex-direction: column-reverse;

元素按照与文字方向（书写模式）相反的方向，沿着纵向轴。

#flex-flow

是 flex-direction 和 flex-wrap 的缩写形式。

#flex-grow

定义了元素当有可用空间的时候如何 占用。

默认属性 flex-grow: 0;

元素 不 不占用剩余空间。它仅仅占用自身所需空间。

flex-grow: 1;

元素将 占用 扩展因子 1。如果没有其他元素也设置了 flex-grow 的话，它将占用剩下的所有空间。

flex-grow: 2;

因为 flex-grow 的值是相对的，它的具体表现还取决于此元素的同级元素。

在这个例子中，剩余空间被分隔成了 3 个扩展因子：

  • 三分之一分配给了绿色 元素
  • 三分之二分配给了粉色元素
  • 没有其他空间分配给黄色元素，它保留了自身原本占用的大小。

#flex-shrink

定义了当没有足够空间的时候，元素如何压缩自身空间。

默认属性 flex-shrink: 1;

当主轴（横向轴）没有足够空间的时候，元素将按照扩展因子 1 来进行压缩，也将导致换行（折叠）其自身的内容。

flex-shrink: 0;

元素不压缩：占用它所需要的宽且不换行（折叠）自身的内容。同级元素将压缩给出目标元素足够的控件。

因为目标元素不换行（折叠）自身的内容，所以可能会导致 flexbox 容器的内容产生元素移除。

flex-shrink: 2;

因为 flex-shrink 的值是相对的，它的具体表现还取决于此元素的同级元素。

在此例子中，绿色的元素占用了 100% 的宽度。此部分的空间将从它的两个同级元素中占用，并且占用被分成了 4份：

  • 四分之三从红色元素中获取（红色压缩四分之三）
  • 四分之一从黄色元素中获取（黄色压缩四分之一）

#flex-wrap

定义了元素在 flexbox 容器中是显示一行还是多行。

默认属性 flex-wrap: nowrap;

元素将始终保持单行，最终，如果需要将会进行元素溢出。

flex-wrap: wrap;

元素将根据实际情况分布在多行。

flex-wrap: wrap-reverse;

元素将根据实际情况分布在多行。任何新增的行都将会被添加在之前的一行之前。

#justify-content

定义了在 flexbox 容器中，元素沿着主轴（横向轴）的对齐情况。

默认属性 justify-content: flex-start;

元素朝着主轴（横向轴）的开始方向排列。

justify-content: flex-end;

元素朝着主轴（横向轴）的末尾方向排列。

justify-content: center;

元素朝着主轴（横向轴）的中间排列。

justify-content: space-between;

剩余的空间平均分布在元素之间。

justify-content: space-around;

剩余的空间平均分布在元素的开始和结束处：在第一个元素的前面和最后一个元素的后面也分配空间。

#order

定义元素的排序。

默认属性 order: 0;

元素的排序按照其 HTML 代码中的排序。

order: 1;

元素的排序与其同级元素具有相关性。最终的排序将会考虑到所有元素的排序值。

order: -1;

值你可以使用负数。

order: 9;

你可以为每一个元素设置不同的值。