Written by MT

古くはtable、css2以降はfloatやinline-block等で実現してきた横並びレイアウトは、flexboxの登場により大きく変わりました。
今ではブラウザの対応も十分なので、横並びはほとんどflexbox一本で実現できるようになっています。
それほどflexboxはレイアウトの幅が広く、痒い所に手が届く仕様になっています。

また、flexboxで実現出来るのは横並びだけではありません。
今回は横並びレイアウト以外も含めてflexboxのちょっとした小技を紹介しようと思います。

横並びブロックの高さを揃える

横並び以外と言いながら、最初は基本のきの使い方です。
floatやinline-blockでの横並びは、基本的に上揃えです。
各ブロックの高さを揃えるには、heightを固定するかjavascriptで高さを揃える必要がありました。

それがflexboxだとデフォルトの仕様です。

目的のレイアウト

html

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

css

pに指定している背景色やマージンは見やすくするためのものですので、必要な記述は display:flex; だけです。
align-itemsというプロパティにstretchが指定されているとこのような挙動になりますが、align-itemsはstretchが初期値のため、reset.css等で変更していない限り何も書く必要が無いわけです。
もう横並びブロックで高さ揃えに困ることはありません。

ブロック内部の縦中央寄せ

ブロック内を縦中央寄せにしたければ、今まではタグを入れ子にする必要がありました。
それが、frexboxを使えば1つのタグで実現できます。

目的のレイアウト

html

テキストテキストテキストテキスト

css

たったこれだけで縦中央配置が出来ます。
align-items:center;は横並びにしたボックスの縦中央揃えが出来ますが、それを子要素ひとつでやってるという感じですね。
子要素にあたるものがタグで囲まれていなくても有効なのがミソです。

横中央寄せ+テキスト左揃え

結構このタイプのデザイン作る人多いんですよね。
これも従来まではタグを入れ子にする必要があり、この為だけにタグを増やすもなんか嫌な気がしてたのですが、frexboxを使えば1つのタグで実現できます。

目的のレイアウト

html

テキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト

css

justify-content:center;は横中央配置になりますが、中央揃えにはならないのでこのような配置になります。

失敗例

これ結構便利なんですが、ひとつ注意点があります。
flex内部はタグで囲まれていなくても子要素として作用するのでこのレイアウトが可能なんですが、何かタグで囲まれた部分があると「囲まれてる部分」と「囲まれてない部分」の2つ子要素があるとの判断となり、横並びになってしまいます。
下記は文中にstrongの強調があったので失敗してしまいました。

テキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト

タイトルの左右に線を引く装飾

beforeとafter(疑似要素)を使って線を引き、文字の横に配置します。 これも従来はタグの入れ子が必要でした。

目的のレイアウト

html

タイトルタイトルタイトル

css

おわりに

いかがでしたでしょうか。
今回は小技の紹介でしたが、flexboxは他にも結構色々な事が出来るので調べてみると面白いですよ。

blog top

Webに関するお問い合わせ、
ご相談はこちら。