CSS 属性

CSS Flex 属性定义 Flex 项目如何沿着 Flex 容器增大、缩小和分配空间。此属性是以下 CSS 属性的简写:

属性值

  • initial− 该项目根据其宽度和高度属性调整大小。它相当于 flex: 0 1 auto

  • auto - 项目的大小由其宽度和高度属性决定，扩展以填充 Flex 容器中的额外空间，并收缩到其最小大小以适应容器。它等于 flex: 1 1 auto。

  • none - 该项目的大小保持固定，并且当 Flex 容器的尺寸发生变化时不会扩展或收缩。它等于 flex: 0 0 auto。

  • <'flex-grow'> - 指定项目相对于其余灵活项目增长多少的数字

  • <'flex-shrink'>− 指定项目相对于其余灵活项目收缩多少的数字。

  • <'flex-basis'> - 项目的长度。 （auto、%、px、em 等）

适用范围

Flex 项目，包括流内伪元素

DOM 语法 

object.style.flex = "auto|none|<number>";

CSS Flex: auto 

以下示例演示了 flex: auto 属性均匀地增大和缩小 Flex 项目以填充可用空间 - 

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container>div {
      background-color: yellow;
      margin: 10px;
      padding: 15px;
      flex: auto;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>

CSS Flex: none 

以下示例演示了 flex: none 属性可防止 Flex 项目增大或缩小以填充可用空间 - 

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container>div {
      background-color: yellow;
      margin: 10px;
      padding: 15px;
      flex: none;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>

CSS Flex: <number> 

以下示例演示了 flex:2 属性第二个网格项将占用 Flex 容器中其他 Flex 项空间的两倍 - 

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green; 
   }
   .flex-container>div {
      background-color: yellow;
      margin: 10px;
      padding: 15px;
   }
   .flex-item2 {
      flex: 2;
   }
</style>
</head>
<body>
   <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>