flex-basis プロパティ

プロパティ flex-basis は、他のフレックスプロパティが適用される前の、特定のフレックスアイテムのサイズを設定します。一般に、このプロパティはメイン軸に沿った要素のサイズを指定します。 つまり、メイン軸が水平の場合は要素の幅を、垂直の場合は高さを設定することになります。

特定のフレックスアイテムに適用されます。

このプロパティは、一括指定プロパティである flex の構成要素です。

構文

cssセレクター {
  flex-basis: CSSの任意の単位（パーセンテージを含む） | auto;
}

初期値: auto。

例

メイン軸が水平方向であり、flex-basis の値が 50px とします。 この場合、要素の幅は 50px になります：

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent  {
  display: flex;
  flex-direction: row; /* 軸は水平 */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* 要素のサイズ */
  border: 1px solid green;
}

Результат:

例

プロパティ flex-basis の値を変えずに、軸を反転させてみましょう。この場合、要素の高さが 50px になります：

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: column; /* 軸は垂直 */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

関連項目