CSS - flex 属性

CSS flex 是一个简写属性，用于定义属性 flex-grow、flex-shrink 和 flex-basis 的值。它定义了弹性项目如何增长、收缩以及在弹性容器中分配空间。为了使该属性生效，元素必须是弹性项目。

语法

flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

属性值

值	描述
flex-grow	一个数字，指定项目相对于其他弹性项目的增长程度。
flex-shrink	一个数字，指定项目相对于其他弹性项目的收缩程度。
flex-basis	它指定项目的长度，使用长度值（例如 auto、%、px、em 等）。
auto	项目的大小由其 width 和 height 属性决定，扩展以填充弹性容器中的额外空间，并收缩到其最小尺寸以适应容器。它等效于 flex: 1 1 auto。
none	项目的大小保持固定，并且当弹性容器的尺寸发生变化时不会扩展或收缩。它等效于 flex: 0 0 auto。
initial	项目根据其 width 和 height 属性进行大小调整。它等效于 flex: 0 1 auto。
inherit	它从父元素继承该属性。

CSS Flex 属性示例

以下示例说明了使用不同值的 flex 属性。

定义 Flex 属性的所有值

flex 属性是属性 flex-grow、flex-shrink 和 flex-basis 的组合，可以在一条语句中为所有这些属性提供值。元素将相应调整。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         height: 100px;
         border: 1px solid black;
      }

      .item {
         border: 3px solid grey;
         padding: 10px;
         color: white;
         text-align: center;
      }

      .item1 {
         flex: 1 1 100px;
         background-color: lightblue;
      }

      .item2 {
         flex: 2 1 150px;
         background-color: lightgreen;
      }

      .item3 {
         flex: 1 2 200px;
         background-color: lightcoral;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: flex-grow flex-shrink flex-basis
   </h4>
   <div class="container">
      <div class="item item1">
         Item 1
      </div>
      <div class="item item2">
         Item 2
      </div>
      <div class="item item3">
         Item 3
      </div>
   </div>
</body>

</html>

使用单个值的 Flex 属性

我们还可以为 flex 属性提供一个整数。此值设置元素的 flex-grow 系数，使其相对于其他弹性项目增长。flex-shrink 和 flex-basis 属性分别默认为 1 和 auto。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgrey;
      }

      .flex-container>div {
         color: white;
         text-align: center;
         background-color: #4CAF50;
         margin: 10px;
         padding: 15px;
      }

      .flex-item2 {
         flex: 2;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: 2 (The second item takes up 2x
      the space of the other flex items)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div class="flex-item2">
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
   </div>
</body>

</html>

使用 Auto 值的 Flex 属性

为了让弹性项目均匀增长和收缩以填充容器的可用空间，我们使用 auto 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgrey;
      }

      .flex-container>div {
         color: white;
         background-color: #4CAF50;
         margin: 10px;
         padding: 15px;
         flex: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: auto (all items fill the available
      container space)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div>
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
   </div>
</body>

</html>

使用 None 值的 Flex 属性

为了防止弹性项目均匀增长和收缩以填充容器的可用空间，我们使用 none 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgrey;
      }

      .flex-container>div {
         color: white;
         background-color: #4CAF50;
         margin: 10px;
         padding: 15px;
         flex: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: none (all items' size remains fixed)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div>
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
flex	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

打印页面