flex
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
flex
CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
尝试一下
成分属性
此属性是以下 CSS 属性的简写:
语法
/* 关键字值 */
flex: auto;
flex: initial;
flex: none;
/* 单值,无单位数字:flex-grow
flex-basis 此时等于 0。 */
flex: 2;
/* 单值,宽度/高度:flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 双值:flex-grow | flex-basis */
flex: 1 30px;
/* 双值:flex-grow | flex-shrink */
flex: 2 2;
/* 三值:flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* 全局值 */
flex: inherit;
flex: initial;
flex: revert;
flex: revert-layer;
flex: unset;
可以使用一个,两个或三个值来指定 flex
属性。
-
单值语法:值必须是以下之一:
- 一个
<flex-grow>
的有效值:此时简写会扩展为flex: <flex-grow> 1 0
。 - 一个
<flex-basis>
的有效值:此时简写会扩展为flex: 1 1 <flex-basis>
。 - 关键字
none
或者全局关键字之一。
- 一个
-
双值语法:
-
第一个值必须是一个
flex-grow
的有效值。 -
第二个值必须是以下之一:
- 一个
flex-shrink
的有效值:此时简写会扩展为flex: <flex-grow> <flex-shrink> 0
。 - 一个
flex-basis
的有效值:此时简写会扩展为flex: <flex-grow> 1 <flex-basis>
。
- 一个
-
-
三值语法:值必须按照以下顺序指定:
- 一个
flex-grow
的有效值。 - 一个
flex-shrink
的有效值。 - 一个
flex-basis
的有效值。
- 一个
取值
initial
-
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器,但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"
flex: 0 1 auto
"。 auto
-
元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收 flex 容器中额外的自由空间,也会缩短自身来适应 flex 容器。这相当于将属性设置为 "
flex: 1 1 auto
". none
-
元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器。相当于将属性设置为"
flex: 0 0 auto
"。 <'flex-grow'>
-
定义 flex 项目的
flex-grow
。负值无效。省略时默认值为 1。 (初始值为0
) <'flex-shrink'>
-
定义 flex 元素的
flex-shrink
。负值无效。省略时默认值为1
。 (初始值为1
) <'flex-basis'>
-
定义 flex 元素的
flex-basis
属性。若值为0
,则必须加上单位,以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)
描述
大多数情况下,开发者需要将 flex
设置为以下值之一: auto
,initial
,none
,或一个无单位正数。要查看这些值的效果,请尝试调整以下 flex 容器的大小:
默认情况下,元素不会缩短至小于内容框尺寸,若想改变这一状况,请设置元素的min-width
与 min-height
属性。
形式定义
初始值 | 该简写所对应的每个属性:
|
---|---|
适用元素 | flex items, including in-flow pseudo-elements |
是否是继承属性 | 否 |
计算值 | 该简写所对应的每个属性:
|
动画类型 | 该简写所对应的每个属性:
|
形式语法
flex =
none |
[ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
<flex-grow> =
<number [0,∞]>
<flex-shrink> =
<number [0,∞]>
<flex-basis> =
content |
<'width'>
<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
示例
设置 flex: auto
HTML
<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>
CSS
#flex-container {
display: flex;
flex-direction: row;
}
#flex-container > .flex-item {
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
Result
规范
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-property |
初始值 | 该简写所对应的每个属性:
|
---|---|
适用元素 | flex items, including in-flow pseudo-elements |
是否是继承属性 | 否 |
计算值 | 该简写所对应的每个属性:
|
动画类型 | 该简写所对应的每个属性:
|
浏览器兼容性
BCD tables only load in the browser
参见
- CSS Flexbox 指南:Flexbox 基本概念
- CSS Flexbox 指南:控制 Flex 子元素在主轴上的比例