第117回よくあるレイアウトをﬂexboxで簡単に実現する

Coding Methodology
よくあるレイアウトをﬂexboxで簡単に実現する

第117回よくあるレイアウトをﬂexboxで簡単に実現する

CSS3 で新しく制定されたﬂexbox。そのレイアウトの組みやすさから、制作の現場で利用する機会が非常に多くなってきました。要素が増えてもレイアウトが柔軟に対応することや、上下中央寄せが簡単に実現するなど、活用方法は様々です。今回は、実践的なﬂexbox の利用について具体的な事例をご紹介します。

■ケース1 ボタン付きカード型モジュールでの利用

図1は、よくあるカード型モジュールの横並びレイアウトです。
各カードの下部にはボタンがあります。ﬂexbox を使ってこのレイアウトを実装すると、HTMLとCSSは、それぞれコード1-1とコード1-2のようになります。ﬂexboxを利用することによって、1. 同列要素が自動的に同じ高さに揃う、2. ボタンの位置をした揃えに統一できるようになります。
もしこのレイアウトをﬂoat を使ってコーディングした場合、各要素の高さ揃えにJavaScriptを利用したり、ボタンの下揃えにCSSのpositionプロパティを利用する必要がありました。
ﬂexboxを利用することによって、従来だとJavaScriptを利用していたレイアウトがCSSだけで組めるようになったり、使用するプロパティの量を減らすことができます。

図１．横並びのボタン付きカード型モジュール

コード1-1．HTML

コード1-2．CSS

■ケース2 画像とテキストが互い違いに入るレイアウトでの利用

図2は、片側に画像、もう一方にテキストがあるレイアウトです。
さらに、画像とテキストは位置を交互に変えながら繰り返されるレイアウトになっています。
ﬂexboxを利用することで、HTML上で画像とテキストの順序を変えずに画像とテキストの位置を交互に変えることができます。
HTMLの順序を変えないことのメリットとして、1. スマートフォン用レイアウトで画像が上・テキストが下となった場合にHTMLの順序を考慮しなくていいこと、2. サイトを運用する際に変更箇所が把握しやすいことが挙げられます。

図2．画像とテキストが互い違いに入るレイアウト