Flexbox入門

Flexboxを使うとfloatで実現していたような縦並びや横並びのレイアウト、または折り返しのレイアウトを簡単に組むことができます。

横並びにする display: flex

display: flexは指定した要素の子要素を横並びにします。

使い方

横並びにしたい要素の親要素にdisplay: flexを指定します。

index.html

<ul class="flex-list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

style.css

.flex-list {
  display: flex;
}

子要素の幅を親要素に合わせて伸縮させる flex: auto

flex: autoは指定した要素の幅を親要素に合わせて伸縮させることができます。

index.html

<ul class="flex-list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

style.css

.flex-list {
  display: flex;
}

.flex-list li {
  flex: auto; /* 調整したい要素に適用する */
}

子要素のサイズに応じて折り返す flex-wrap: wrap

flex-wrap: wrapを指定すると、子要素のサイズに応じて折り返すことができます。
PC、タブレット、スマホで一列の表示個数を変えたいというのがよくあるユースケースだと思うので、
メディアクエリと合わせて使いましょう。

使い方

折り返したい要素の親要素にflex-wrap: wrapを指定します。
折り返したい要素自身には列数に応じたwidthを指定します。

index.html

<ul class="flex-list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

style.css

.flex-list {
  display: flex;
  flex-wrap: wrap;
}

.flex-list li {
  flex: auto;
  width: 50%; /* 一列に2つ表示する */
}

子要素を上から下に並べる flex-direction: column

flex-direction: columnは子要素を上から下へ並べます。

使い方

縦に並べたい要素の親要素にflex-direction: columnを指定します。

index.html

<ul class="flex-list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

style.css

.flex-list {
  flex-direction: column;
}