CSSのFlexとはどういう意味ですか？

Flexboxは、CSSにおけるレイアウトを制御するための強力なツールです。特に、Webページの要素を柔軟かつレスポンシブに配置する際に役立ちます。Flexboxを使うことで、要素の並び順、方向、配置、余白の分配などを簡単に制御できます。その中でも、flex プロパティは、フレックスアイテムの伸縮性を制御する上で重要な役割を果たします。

flex プロパティの概要

flex プロパティは、フレックスアイテムに対して、フレックスコンテナーの領域内でどのように伸長・収縮するかを指定するための一括指定プロパティです。言い換えれば、フレックスアイテムが利用可能なスペースをどのように利用するかを制御します。

flex プロパティは、以下の3つのプロパティの短縮形として機能します。

flex-grow: フレックスアイテムがどれくらい伸長するかを指定します。
flex-shrink: フレックスアイテムがどれくらい収縮するかを指定します。
flex-basis: フレックスアイテムの初期サイズを指定します。

flex プロパティの使い方

flex プロパティは、以下のように値を指定します。


.item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

値の説明

値	説明
`flex-grow`	数値を指定します。デフォルト値は0です。値が大きいほど、他のフレックスアイテムよりも多く伸長します。
`flex-shrink`	数値を指定します。デフォルト値は1です。値が大きいほど、他のフレックスアイテムよりも多く収縮します。
`flex-basis`	幅、高さ、またはキーワード (auto など) を指定します。デフォルト値はautoです。フレックスアイテムの初期サイズを指定します。

使用例


<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>


.container {
  display: flex;
  width: 300px;
}

.item {
  background-color: lightblue;
  padding: 10px;
  margin: 5px;
}

.item-1 {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
}

.item-2 {
  flex: 2 1 50px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 50px */
}

.item-3 {
  flex: 0 0 100px; /* flex-grow: 0, flex-shrink: 0, flex-basis: 100px */
}

上記の例では、item-1 は伸長し、item-2 はさらに大きく伸長し、item-3 は固定幅になります。

参考資料

よくある質問

Q1: `flex: 1` と指定するとどうなるのですか？

A1: flex: 1 は flex: 1 1 0 の省略形で、フレックスアイテムが他のアイテムよりも多く伸長することを意味します。具体的には、利用可能なスペースに対して、他のアイテムが伸長した後に残ったスペースをすべて占めるように伸長します。

Q2: `flex-shrink` プロパティはどのように使うのですか？

A2: flex-shrink プロパティは、フレックスコンテナーの幅がすべてのフレックスアイテムの幅の合計よりも小さい場合に、フレックスアイテムがどれだけ縮小するかを指定します。値が大きいほど、他のフレックスアイテムよりも多く縮小します。

Q3: `flex-basis` プロパティと `width` プロパティの違いは何ですか？

A3: flex-basis プロパティは、フレックスアイテムの初期サイズを指定します。一方、width プロパティは、フレックスアイテムの幅を指定します。flex-basis プロパティが auto 以外に設定されている場合、width プロパティよりも優先されます。

その他の参考記事:jquery css 複数