flex

该flex CSS属性指定柔性的项目将如何增大或缩小，以适应其柔性容器的可用空间。flex-grow，flex-shrink和flex-basis。

/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

在大多数情况下，作者应该设置flex以下值之一：auto，initial，none，或者是一个正数。要查看这些值的效果，请尝试调整以下FLEX容器的大小：

auto该项目是根据它的大小width和height性质，但长到吸收柔性容器中的任何额外的自由空间，并缩小其最小尺寸为适合容器。这相当于设置“ flex: 1 1 auto”。

initial这是默认值。项目根据其大小width和height性质。它缩小到适合容器的最小尺寸，但不会增长以吸收柔性容器中的任何额外的自由空间。这相当于设置“ flex: 0 1 auto”。none项目根据其大小width和height性质。它是完全不灵活的：既不缩水也不增长。这相当于设置“ flex: 0 0 auto”。

<positive-number>该项目被给予容器中的空闲空间的指定比例。这相当于设置“ flex: <positive-number> 1 0”。

默认情况下，弹性项目不会缩小到最小内容大小以下。要改变这个，请设置项目的min-width或min-height。

• flex-grow*0

• flex-shrink*1

• flex-basis*auto

Applies to flex items, including in-flow pseudo-elements   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

• flex-grow*具体规定

• flex-shrink*具体规定

• flex-basis：：按规定，但相对长度转换为绝对长度

Animation type as each of the properties of the shorthand:

• flex-grow*a数

• flex-shrink*a数

• flex-basis：长度，百分比或calc（）;

Canonical order order of appearance in the formal grammar of the values  

语法

该flex属性可以使用一个，两个或三个值来指定。

单值语法：值必须是下列之一：

• <number> 然后被解释为<flex-grow>.

• 有效的width 然后被解释为<flex-basis>.

• 关键字之一none，auto，或initial.

双值语法：第一个值必须是无单位的<number>，它被解释为<flex-grow>。第二个值必须是以下之一：

• <number>然后被解释为<flex-shrink>.

• 有效的width然后被解释为<flex-basis>.

三值语法：

• 第一个值必须是无单位的<number>，它被解释为<flex-grow>。

• 第二个值必须是无单位的<number>，它被解释为<flex-shrink>。

• 第三个值必须是width被解释为<flex-basis>.

值

<'flex-grow'>定义了flex项目的弹性增长。有关更多细节，请参见<number>。负值被认为是无效的，且默认为0。<'flex-shrink'>定义了flex项的flex收缩。有关更多细节，请参见<number>。负值被认为是无效的，默认为1。<'flex-basis'>定义了flex项目的弹性基础。任何对宽度和高度属性有效的值都被接受。首选的0大小必须有一个单元，以避免被解释为灵活性。默认为auto时省略。noneThis关键字计算为0自动。

使用一个或两个无单位值时，基于弹性的变化从自动变为0.有关Flexible Box Layout Module.可以找到更多信息。

形式语法

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

例

#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}

<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

结果

规范

浏览器兼容性