横並びだけじゃない！flexboxの小技

公開日：2020.06.19

古くは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の強調があったので失敗してしまいました。

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