Flexbox - CSS 参考

#align-content

定义每行如何在 flexbox/grid 容器内对齐。仅当存在 flex-wrap: wrap 且存在多行 flexbox/grid 项目时才适用。

默认 align-content: stretch;

每行都会拉伸以填充剩余空间。

在这种情况下，容器的高度为 300px。所有框的高度均为 50px，除了第二个框的高度为 100px。

第一行的高度为100px
第二行的高度为50px
剩余空间为150px

此剩余空间在两行之间平均分配

第一行的高度现在为175px
第二行的高度现在为125px

align-content: flex-start;

每行只填充它需要的空间。它们都将移至 flexbox/grid 容器横轴的起点。

align-content: flex-end;

每行只填充它需要的空间。它们都将移至 flexbox/grid 容器横轴的终点。

align-content: center;

每行只填充它需要的空间。它们都将移至 flexbox/grid 容器横轴的中心。

align-content: space-between;

每行只填充它需要的空间。剩余空间将出现在行之间。

align-content: space-around;

每行只填充它需要的空间。剩余空间将在行周围平均分配：第一行之前、两行之间以及最后一行之后。

#align-items

定义 flexbox 项目如何根据横向轴在 flexbox 容器的一行内对齐。

align-items: flex-start;

flexbox 项目在横向轴的起点对齐。

默认情况下，横向轴是垂直的。这意味着 flexbox 项目将在顶部垂直对齐。

align-items: flex-end;

flexbox 项目在横向轴的终点对齐。

默认情况下，横向轴是垂直的。这意味着 flexbox 项目将在底部垂直对齐。

align-items: center;

flexbox 项目在横向轴的中心对齐。

默认情况下，横向轴是垂直的。这意味着 flexbox 项目将垂直居中。

align-items: baseline;

flexbox 项目在横向轴的基线对齐。

默认情况下，横向轴是垂直的。这意味着 flexbox 项目将自身对齐，以便其文本的基线沿水平线对齐。

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，则只有目标将在横轴的基线。

默认情况下，这意味着它将沿文本的基线对齐。

align-self: stretch;

如果容器具有 align-items: center 且目标具有 align-self: stretch，则只有目标将在整个横轴上拉伸。

#flex-basis

定义 flexbox 项目的初始大小。

默认 flex-basis: auto;

元素将根据其内容或任何已定义的 height 或 width 值自动调整大小。

flex-basis: 80px;

您可以定义像素或(r)em值。元素将包裹其内容以避免任何溢出。

#flex-direction

定义弹性盒子项目在弹性盒子容器内的排列顺序。

默认值 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份

1/3分配给绿色项目
2/3分配给粉色项目
黄色项目没有分配任何空间，它保留其初始宽度

#flex-shrink

定义如果没有足够的空间，弹性盒子项目应该缩小多少。

默认值 flex-shrink: 1;

如果容器的主轴上没有足够的空间，元素将缩小1倍，并换行其内容。

flex-shrink: 0;

元素不会缩小：它将保留它需要的宽度，并且不会换行其内容。它的兄弟元素将缩小以腾出空间给目标元素。

因为目标元素不会换行其内容，所以弹性盒子容器的内容有可能会溢出。

flex-shrink: 2;

因为flex-shrink值是相对的，所以它的行为取决于弹性盒子项目兄弟元素的值。

在这个例子中，绿色项目想要填充100%的宽度。它需要的空间是从它的两个兄弟元素中获取的，并被分成4份

3/4取自红色项目
1/4取自黄色项目

#flex-wrap

定义弹性盒子项目是在弹性盒子容器内的单行显示还是多行显示。

默认值 flex-wrap: nowrap;

弹性盒子项目将始终保持在单行显示，无论如何，如果需要，最终会溢出。

flex-wrap: wrap;

如果需要，弹性盒子项目将分布在多行上。

flex-wrap: wrap-reverse;

如果需要，弹性盒子项目将分布在多行上。任何额外的行将出现在前一行之前。

#justify-content

定义弹性盒子/网格项目在弹性盒子/网格容器内的主轴上如何对齐。

默认值 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值时，最终顺序才会确定。

order: -1;

可以使用负值。

order: 9;

可以为每个弹性盒子项目设置不同的值。