flex

CSSのflexは、フレックスコンテナの大きさに合わせてフレックスボックスの拡大や縮小を行うかどうかを指定するプロパティです。

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

適用対象

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

関連記事

参考文献

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