CSS - flex-basis

描述

CSS 屬性 flex-basis 用於設定彈性專案在主軸上的初始大小，在分配剩餘空間給彈性專案之前。

flex-basis 屬性可以使用各種單位定義，例如畫素 (px)、百分比 (%)、em (em)，甚至像 auto 這樣的關鍵字。

可能的值

size - 以畫素為單位的大小。

應用於

所有 HTML 元素。

DOM 語法

flex-basis: size;

以下示例展示了此屬性的效果：

<html>
<head>
<style>
   .my_flex_basis {
      display: flex;
      align-items: stretch;
      background-color: #0ca14a;
   }
   .my_flex_basis div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my_flex_basis">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div style="flex-basis:300px">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
      <div>Flex item 8</div>
   </div>
</body>
</html>

列印頁面