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 2020.

flex CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

尝试一下

成分属性

此属性是以下 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>。
三值语法：值必须按照以下顺序指定：
1. 一个 flex-grow 的有效值。
2. 一个 flex-shrink 的有效值。
3. 一个 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 容器的大小：

<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;
}

默认情况下，元素不会缩短至小于内容框尺寸，若想改变这一状况，请设置元素的min-width 与 min-height属性。

形式定义

初始值	as each of the properties of the shorthand: `flex-grow`: `0` `flex-shrink`: `1` `flex-basis`: `auto`
适用元素	flex items, including in-flow pseudo-elements
是否是继承属性	否
计算值	as each of the properties of the shorthand: `flex-grow`: as specified `flex-shrink`: as specified `flex-basis`: as specified, but with relative lengths converted into absolute lengths
Animation type	as each of the properties of the shorthand: `flex-grow`: a number `flex-shrink`: a number `flex-basis`: a length, percentage or calc();

形式语法

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

示例

设置 flex: auto

HTML

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

css

#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;
}

Result

规范

Specification
CSS Flexible Box Layout Module Level 1 # flex-property

初始值	as each of the properties of the shorthand: `flex-grow`: `0` `flex-shrink`: `1` `flex-basis`: `auto`
适用元素	flex items, including in-flow pseudo-elements
是否是继承属性	否
计算值	as each of the properties of the shorthand: `flex-grow`: as specified `flex-shrink`: as specified `flex-basis`: as specified, but with relative lengths converted into absolute lengths
Animation type	as each of the properties of the shorthand: `flex-grow`: a number `flex-shrink`: a number `flex-basis`: a length, percentage or calc();

浏览器兼容性

BCD tables only load in the browser

参见

CSS Flexbox 指南：Flexbox 基本概念
CSS Flexbox 指南：控制 Flex 子元素在主轴上的比例