【横並びだけじゃない】display: flexの使いどころ

display: flex;、もしかして要素の横並びのときだけ使っていないですか？

実は要素の横並び以外でも使えるときがあります。

また、display: flex;を使うことによってコードが少なくなるメリットもあります。

一緒にdisplay: flex;を活用していきましょう！

横並びだけじゃない、display: flexの使いどころ

文字の縦中央（センター）寄せ

See the Pen Untitled by 伊とう (@ito-the-typescripter) on CodePen.

このような縦方向の中央揃え、色々方法がありますが私はこれを愛用しています。

  display: flex;
  align-items: center;

親要素に2行追加するだけで縦の中央揃えが実現できます。

要素間の間隔をgapで調整

See the Pen Untitled by 伊とう (@ito-the-typescripter) on CodePen.

上記のように要素を縦に3つ並べる時にもdisplay: flex;を使っています。

感じているメリットはコードの簡素化とわかり易さ、です。

要素間の隙間がgapで表現できるのがとてもわかり易いと感じています。

コードはこちら。

ul{
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
}

1〜3行目が必要な記載になります。

display: flex;で宣言、
flex-direction: column;で縦並びに、
gap: 32px;で要素間の間隔を指示しています。

要素間の間隔は:not(:first-of-type)などを使って記載することもできますが、
個人的にはコードが見にくくなってしまうのでdisplay: flex;とgapを使った記載の方が好きです。

まとめ

display: flex;を使った便利な記載方法を紹介しました。

自分なりの記載方法を一つ持っておくとコーディングの際の悩みも少なくなり、より効率的にコーディングできると感じています。

この方法に限らずお気に入りの記載方法を見つけて下さいね。

参考になった方は下記のコメントやお問い合わせ、ツイッターのDMにてご連絡頂けるととても嬉しいです。

それでは！