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”。

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

初始值	作为简写的每个属性：flex-grow：0 flex-shrink：1 flex-basis：auto
适用于	弹性项目，包括流入的伪元素
继承	没有
媒体	可视化的
计算值	作为速记的每个属性：flex-grow：按照指定的flex-shrink：按照指定的flex-basis：按照规定，但是将相对长度转换为绝对长度
动画类型	作为简写的每个属性：flex-grow：一个数字flex-shrink：一个数字flex-basis：一个长度，百分比或者calc（）;
规范的顺序	出现在价值形式语法中的次序

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>

结果

规范

Specification	Status	Comment
CSS Flexible Box Layout ModuleThe definition of 'flex' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Firefox (Gecko)	Chrome	Edge	Internet Explorer	Opera	Safari
Basic support	18.0 (18.0)1 20.0 (20.0) 28.0 (28.0)2	21.0-webkit 29.0	(Yes)-webkit (Yes)	10.0-ms3 11.03	12.10	6.1-webkit 9.0

Feature	Firefox Mobile (Gecko)	Android	Edge	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	4.4	(Yes)-webkit (Yes)	11	12.10	7.1-webkit