flex

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本上运行。它从以下时间在所有浏览器中可用 2015 年 9 月.

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

试一试

组成属性

此属性是以下 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。

可以使用以下 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 不相同，而规范中指定的是 0。这可能会在某些情况下影响弹性布局。请参阅 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()>                             

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见