HTML

コピペで簡単 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;
}
子要素1
子要素2
子要素3
子要素4

要素を途中で折り返す

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

子要素1
子要素2
子要素3
子要素4
子要素5
子要素6
子要素7
子要素8

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

.list {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
子要素1
子要素2
子要素3
子要素4
子要素5
子要素6
子要素7
子要素8

まとめ

コピペで簡単 CSSの Flexbox の使い方を紹介しました。

合わせて読みたい関連記事