Flexboxモデルのフレックスコンテナを指定する【CSS】

フレキシブルボックスレイアウト（Flexboxモデル）を利用するために、displayプロパティで「フレックスコンテナ」とする要素を指定します。

{display: コンテナの種類;}

フレキシブルボックスとは柔軟性のあるボックスのことで、floatで行っていた横ならびのレイアウトが比較的簡単にできます。

このレイアウト方法を使うためには、必ずフレックスコンテナが必要で、displayプロパティでその要素を指定する必要があるということ。

値の指定方法

displayプロパティでは、以下のような値を指定できます。

flexを指定すると、要素をブロックレベルのフレックスコンテナに指定します。

上の例では、ul要素にdisplayプロパティでflexを指定しています。

inline-flexを指定すると、要素をインラインレベルのフレックスコンテナに指定します。

フレキシブルボックスの利用時には以下のように、併用できないプロパティや要素があるということも覚えておきましょう。