コピペで簡単 CSSの Flexbox の使い方を紹介

CSSの Flexbox の使い方を紹介します。
例えば、親要素内の子要素を均等に並べたい場合に便利な方法です。

1. 要素を並列に並べる
2. 要素を途中で折り返す

要素を並列に並べる

まずは基本的な指定方法、要素を並列に並べる方法を紹介します。
ベースの HTML は次の通りです。

<div class="list">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

  <div class="item">4</div>

</div>

親要素に display: flex; を指定した場合、次のように表示されます。

.list {

  display: -webkit-flex;

  display: flex;

}

要素を途中で折り返す

子要素を折り返して表示したい場合は flex-wrap: wrap; を追加する必要があります。
追加しない場合は次のように表示されます。

flex-wrap: wrap; を追加した場合は次のように表示されます。

.list {

  display: -webkit-flex;

  display: flex;

  flex-wrap: wrap;

}

まとめ

CSSの Flexbox の使い方を紹介しました。