flex
CSS
shorthand property
sets how a flex
item
will grow or shrink to fit the space available in its flex container.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
此特性是下列 CSS 特性的简写：
/* Keyword values */ flex: auto; flex: initial; flex: none; /* One value, unitless number: flex-grow */ flex: 2; /* One value, width/height: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* 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
property may be specified using one, two, or three values.
<number>
: In this case it is interpreted as
flex: <number> 1 0
; the
<flex-shrink>
value is assumed to be 1 and the
<flex-basis>
value is assumed to be
0
.
none
,
auto
，或
initial
.
<number>
and it is interpreted as
<flex-grow>
.
<number>
: then it is interpreted as
<flex-shrink>
.
width
: then it is interpreted as
<flex-basis>
.
<number>
for
<flex-grow>
.
<number>
for
<flex-shrink>
.
width
for
<flex-basis>
.
initial
width
and
height
properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "
flex: 0 1 auto
".
auto
width
and
height
properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "
flex: 1 1 auto
".
none
width
and
height
properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "
flex: 0 0 auto
".
<'flex-grow'>
flex-grow
of the flex item. Negative values are considered invalid. Defaults to
1
when omitted. (initial is
0
)
<'flex-shrink'>
flex-shrink
of the flex item. Negative values are considered invalid. Defaults to
1
when omitted. (initial is
1
)
<'flex-basis'>
flex-basis
of the flex item. A preferred size of
0
must have a unit to avoid being interpreted as a flexibility. Defaults to
0
when omitted. (initial is
auto
)
For most purposes, authors should set
flex
to one of the following values:
auto
,
initial
,
none
, or a positive unitless number. To see the effect of these values, try resizing the flex containers below:
<div class="flex-container"> <div class="item auto">auto</div> <div class="item auto">auto</div> <div class="item auto">auto</div> </div> <div class="flex-container"> <div class="item auto">auto</div> <div class="item initial">initial</div> <div class="item initial">initial</div> </div> <div class="flex-container"> <div class="item auto">auto</div> <div class="item auto">auto</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item initial">initial</div> <div class="item none">none</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item four">4</div> <div class="item two">2</div> <div class="item one">1</div> </div>
* {
box-sizing: border-box;
}
.flex-container {
background-color: #F4F7F8;
resize: horizontal;
overflow: hidden;
display: flex;
margin: 1em;
}
.item {
margin: 1em;
padding: 0.5em;
width: 110px;
min-width: 0;
background-color: #1B5385;
color: white;
font-family: monospace;
font-size: 13px;
}
.initial {
flex: initial;
}
.auto {
flex: auto;
}
.none {
flex: none;
}
.four {
flex: 4;
}
.two {
flex: 2;
}
.one {
flex: 1;
}
By default flex items don't shrink below their minimum content size. To change this, set the item's
min-width
or
min-height
.
| 初始值 |
as each of the properties of the shorthand:
|
|---|---|
| 适用于 | flex items, including in-flow pseudo-elements |
| 继承 | no |
| 计算值 |
as each of the properties of the shorthand:
|
| 动画类型 |
as each of the properties of the shorthand:
|
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
<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>
#flex-container {
display: flex;
flex-direction: row;
}
#flex-container > .flex-item {
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
raw.style.display = raw.style.display == "none" ? "block" : "none";
});
#flex-container {
width: 100%;
font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
border: 1px solid #f00;
padding: 1rem;
}
#flex-container > .raw-item {
border: 1px solid #000;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Flexible Box Layout Module
The definition of 'flex' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
flex
|
Chrome 完整支持 29 | Edge 完整支持 12 |
Firefox
完整支持
20
注意事项
|
IE
完整支持
11
注意事项
|
Opera 完整支持 12.1 | Safari 完整支持 9 | WebView Android 完整支持 4.4 | Chrome Android 完整支持 29 |
Firefox Android
完整支持
20
注意事项
|
Opera Android 完整支持 12.1 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 2.0 |
完整支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。