1. Web
  2. CSS
  3. flex

flex

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 2015 年 9 月以来，该特性已在各大浏览器中可用。

flex 这个 CSS 简写属性用于设置弹性项目（flex item）如何增大或缩小以适应其弹性容器（flex container）中的可用空间。

试一试

flex: 1;

flex: 2;

flex: 1 30px;

flex: 1 1 100px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Change me</div>
  <div>flex: 1</div>
  <div>flex: 1</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

构成属性

此属性是以下 CSS 属性的简写：

语法

css
/* Keyword value */
flex: none; /* 0 0 auto */

/* One value, unitless number: flex-grow
flex-basis is then equal to 0%. */
flex: 2; /* 2 1 0% */

/* One value, width/height: flex-basis */
flex: auto; /* 1 1 auto */
flex: 10em; /* 1 1 10em */
flex: 30%;
flex: min-content;

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

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

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

/* Global values */
flex: inherit;
flex: initial; /* 0 1 auto */
flex: revert;
flex: revert-layer;
flex: unset;

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

  • 单值语法：该值必须是以下之一：

    • 一个 <flex-grow> 的有效值：此时，在所有浏览器中，该简写会展开为 flex: <flex-grow> 1 0%。然而，规范中规定它应展开为 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 的有效值。

值

<'flex-grow'>

定义弹性项目的 flex-grow。负值无效。省略时默认为 1。（初始值为 0）

<'flex-shrink'>

定义弹性项目的 flex-shrink。负值无效。省略时默认为 1。（初始值为 1）

<'flex-basis'>

定义弹性项目的 flex-basis。省略时默认为 0%。初始值为 auto。

none

项目大小根据其 width 和 height 属性确定。它是完全不灵活的：既不会相对于弹性容器缩小，也不会增大。这等同于设置 flex: 0 0 auto。

通常期望的 flexbox 效果可以通过使用以下 flex 值来实现：

  • initial：弹性项目不增长但可以收缩。此默认值展开为 flex: 0 1 auto。项目的大小根据其 width 或 height 属性确定，具体取决于 flex-direction。如果存在负可用空间，项目将收缩到其最小尺寸以适应容器，但不会增长以吸收弹性容器中的任何正可用空间。

  • auto：弹性项目可以增长和收缩。此值展开为 flex: 1 1 auto。项目的大小根据其 width 或 height 属性确定，具体取决于 flex-direction，但会增长以吸收弹性容器中的可用正空间，或在存在负空间的情况下收缩到其最小尺寸以适应容器。弹性项目是完全灵活的。

  • none：弹性项目既不增长也不收缩。此值展开为 flex: 0 0 auto。项目的大小根据其 width 或 height 属性确定，具体取决于弹性容器的方向。弹性项目是完全不灵活的。

  • flex: <number [1,∞]>：弹性项目的主尺寸将与设置的数字成比例。此值展开为 flex: <number> 1 0。这将 flex-basis 设置为零，并使弹性项目变得灵活。项目至少会与其最小尺寸一样宽或高，容器的正可用空间将根据此项目及其兄弟弹性项目的增长因子按比例分配。如果所有弹性项目都使用此模式，则所有项目的大小都将与其数值成比例。

    警告：当 flex 值中未指定 flex-basis 时，浏览器会使用 flex-basis 值 0%。这与规范所说的 flex-basis 值 0 不同。在某些情况下，这可能会影响 flex 布局。请参阅 Flex-basis 0 与 0% 示例中演示的此效果。

描述

在大多数情况下，开发者应将 flex 设置为以下值之一：auto、initial、none 或一个正的无单位数字。要查看这些值的效果，请尝试调整下面弹性容器的大小：

默认情况下，弹性项目不会收缩到小于其min-content大小。要改变这一点，请设置项目的 min-width 或 min-height。

正式定义

初始值作为简写中的每个属性
应用于弹性项目，包括在流中的伪元素
继承性否
计算值作为简写中的每个属性
动画类型作为简写中的每个属性

正式语法

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()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<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> = 
  <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

此示例显示了具有 flex: auto 的弹性项目如何增长以吸收容器中的任何可用空间。

HTML

html
<div id="flex-container">
  <div id="flex-auto">
    flex: auto (click to remove/add the `flex: initial` box)
  </div>
  <div id="default">flex: initial</div>
</div>

CSS

css
#flex-container {
  border: 2px dashed gray;
  display: flex;
}

#flex-auto {
  cursor: pointer;
  background-color: wheat;

  flex: auto;
}

#default {
  background-color: lightblue;
}

JavaScript

js
const flexAutoItem = document.getElementById("flex-auto");
const defaultItem = document.getElementById("default");
flexAutoItem.addEventListener("click", () => {
  defaultItem.style.display =
    defaultItem.style.display === "none" ? "block" : "none";
});

结果

弹性容器包含两个弹性项目：

  • #flex-auto 项目的 flex 值为 auto。auto 值展开为 1 1 auto，即允许该项目扩展。
  • #default 项目没有设置 flex 值，因此它默认为 initial 值。initial 值展开为 0 1 auto，即不允许该项目扩展。

#default 项目占据其宽度所需的空间，但不会扩展以占用更多空间。所有剩余空间都由 #flex-auto 项目占据。

当您单击 #flex-auto 项目时，我们将其 #default 项目的 display 属性设置为 none，从而将其从布局中移除。然后，#flex-auto 项目会扩展以占据容器中的所有可用空间。再次单击 #flex-auto 项目会将 #default 项目重新添加回容器中。

规范

规范
CSS 弹性盒子布局模块第 1 级
# flex-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者们更新。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.