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

HTML/CSS

(※ 当ページは社内技術資料としての位置付けですので読みにくいこともあるかもしれませんが、一般の方の課題解決に役立てれば幸いです。)

目的

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

  • float
  • inline-block
  • table

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

対策

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

HTML

CSS

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

バリエーション

(※ 以下の例でのcssはフレックスボックスに関連する必要最低限の記述にとどめています。)

1 均等両端揃え

領域1
領域2
領域3

HTML

CSS

2 固定+可変

固定領域
可変領域

HTML

CSS

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

3 縦並び

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

固定領域
可変領域

HTML

CSS

4 要素入れ替え

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

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

固定領域
可変領域

HTML

CSS

利用シーンが多いパターン

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

領域1
領域2
領域3
領域4

HTML

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

固定領域
可変領域

HTML

CSS

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

さらに詳しくは

下記サイトが詳しいですので参考にしてください。
CSS Flexboxチートシート
CSSフレックスボックス(display:flex)の使い方

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

関連記事一覧