flex

コンテナの中に複数のアイテムを持つ構造をフレキシブル・ボックス（フレックス・ボックス）と呼ぶ。CSS の flex は、コンテナの大きさに合わせてアイテムの拡大や縮小を行うかどうかを指定するプロパティです。

構文

flex: auto
flex: initial
flex: none

値

flex
値 縮小 拡大
auto ✓ ✓
initial ✓ ✗
none ✗ ✗

auto

flex:auto はフレックスコンテナの大きさに合わせてフレックスボックスの拡大や縮小を行います。

<div style="display: flex;">
  <div style="flex:auto; border:1px solid gray;">A</div>
  <div style="flex:auto; border:1px solid gray;">B</div>
  <div style="flex:auto; border:1px solid gray;">C</div>
</div>
A
B
C

ウェブブラウザのサイズを変更すると、フレックスボックスの大きさが変わります。

initial

flex:initial はフレックスコンテナの大きさに合わせてフレックスボックスの縮小を行います。

フレックスボックスを縮小しないときの大きさを、width および height プロパティによって指定する必要があります。

<div style="display: flex;">
  <div style="flex:initial; width: 300px; border:1px solid gray;">A</div>
  <div style="flex:initial; width: 300px; border:1px solid gray;">B</div>
  <div style="flex:initial; width: 300px; border:1px solid gray;">C</div>
</div>
A
B
C

ウェブブラウザのサイズを小さくしたり、スマートフォンでこの画面を見ると、フレックスボックスが縮小されます。

none

flex:none はフレックスコンテナの大きさに合わせてフレックスボックスの拡大や縮小を行いません。

フレックスボックスの大きさが固定されるので、width および height プロパティによって大きさを指定する必要があります。

<div style="display: flex;">
  <div style="flex:none; width: 100px; border:1px solid gray;">A</div>
  <div style="flex:none; width: 100px; border:1px solid gray;">B</div>
  <div style="flex:none; width: 100px; border:1px solid gray;">C</div>
</div>
A
B
C

ウェブブラウザのサイズを変更しても、フレックスボックスの大きさは変わりません。

初期値

0 1 auto

適用対象

フレックス・コンテナ内のフレックス・アイテムとなる要素に対して適用できる。

継承

flex プロパティは親要素の計算値を継承しない。

関連記事

参考文献

World Wide Web Consortium (2018) CSS Flexible Box Layout Module Level 1