CSS - flex-basis 屬性

CSS flex-basis 屬性設定彈性專案在主軸上的初始大小，然後再將剩餘空間分配給彈性專案。為了使該屬性生效，專案必須是彈性的。

語法

flex-basis: auto | number | initial | inherit;

屬性值

值	描述
auto	長度等於彈性專案的長度。如果專案沒有自己的長度，則長度將根據內容確定。預設值。
數值	可以使用長度值 (px, %, em 等) 指定彈性專案的初始長度。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS Flex Basis 屬性示例

以下示例說明了使用不同值的 flex-basis 屬性。

使用 auto 值的 Flex Basis 屬性

為了使彈性專案的大小既可以是特定長度，也可以在沒有指定長度的情況下根據其內容自動調整，我們使用 auto 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         background-color: lightgray;
         padding: 10px;
      }

      .item {
         color: white;
         background-color: #4CAF50;
         border: 1px solid black;
         padding: 10px;
      }

      .item1 {
         width: 180px;
         flex-basis: auto;
      }

      .item2 {
         flex-basis: auto;
      }

      .item3 {
         width: 150px;
         flex-basis: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-basis property
   </h2>
   <h4>
      flex-basis: auto (Item1-180px,
      Item3-150px)
   </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 Basis 屬性

可以使用長度值 (例如 10px、20%、30em 等) 設定彈性專案的初始長度。專案的長度將根據指定的值更改。使用百分比的長度值確定相對於容器大小的尺寸。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         background-color: lightgray;
         padding: 10px;
      }

      .item {
         color: white;
         background-color: #4CAF50;
         border: 1px solid black;
         padding: 10px;
      }

      .item1 {
         flex-basis: 200px;
      }

      .item2 {
         flex-basis: 60%;
      }

      .item3 {
         flex-basis: 35em;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-basis property
   </h2>
   <h4>
      flex-basis: Item1-100px, Item2-50%,
      Item3-45em
   </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-basis	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

列印頁面