要素の並列レイアウト制御 – display flex

目的

グロナビメニュー項目や左右二段組などで、html要素を並列レイアウトにしたいことがあります。
並列レイアウトを実現するには以下の方法があります。

• float
• inline-block
• table

しかしながらこれらの方法では、レイアウトの変更やレスポンシブのような動的な動作への対応が非常に難しくなってしまいます。

対策

フレックスボックスを使用するのがおすすめです。html構成を変更することなく、cssだけで様々なレイアウトへの変更制御が可能になります。

HTML

CSS

親要素に指定すると、子要素が並列レイアウトになります。

1 均等両端揃え

HTML

CSS

2 可変要素数での均等両端揃え

要素数が一定でない場合に均等横並びにするには、親要素に「flex-wrap: nowrap;」、子要素に「width: 100%;」としておくと簡単に制御できます。
flex-basis が指定されている場合は解除「flex-basis: auto;」しておいてください。

HTML

CSS

3 固定+可変

HTML

CSS

（※1）「flex-grow: 1;」とすると、可変領域側の内容が最大幅を超えたときに、固定領域側が固定ではなくなってしまうようです。この時親側に「flex-wrap: wrap;」があると改行してしまいますので、ご注意ください。

4 縦並び

ここで「flex-wrap: wrap;」を追加しておくと、子要素の幅の合計が親要素の幅を超えたときに改行して配置するようになります。この性質を利用して、子要素の幅をすべて100%にするとすべて縦並び、50%50%の要素＋100%とすると2個が並列で3個目が縦に並ぶというレイアウトが楽にできます。
また、flex-basis: 200px;はdisplay: flex;の固定幅の正式な制御方法ですが、widthを使用しても同じ効果が得られます。widthの方が直感的に解かりやすいのでこちらを使用することにします。
※flex-basisとwidthが同時に指定された場合はflex-basisが優先されるようです。解除は「flex-basis: auto;」とします。

HTML

CSS

5 要素入れ替え

並列要素を入れ替える場合は親要素に「flex-direction: row-reverse;」を指定します。
下の例では固定要素が左に配置されていた時に入れていた右スペースを、左に入れ替えています。

下の例ではブラウザの幅を480px以下にしたときに縦列レイアウトに変化します（レスポンシブ動作）。
縦列レイアウトへのレスポンシブ制御は、固定要素をwidth:100%;とし、固定要素が右に配置されていた時に入れていた左スペースなくしています。これはflex-wrap: wrap;としていることで実現される動作です。
さらに縦列要素を入れ替える場合は親要素に「flex-direction: column-reverse;」を指定します。

HTML

CSS

1 複数要素の一列並列レイアウトからのレスポンシブでの複数列並列数変更

HTML

2 固定＋可変の並列レイアウトからのレスポンシブでの縦列レイアウトへの変更

HTML

CSS

.reverseを親要素に指定すれば、入れ替えが簡単に実現できます。