【初心者向け】display: flex;で子要素を折り返す方法

t-file

3年前

こんにちは、webエンジニアのtakaです。

今回は、要素を横向けに配列していく時によく利用するdisplay: flex;で、要素を折り返したい時の方法を記載していきます。

早速みていきましょう。

1 display: flex;で子要素を折り返す方法
2 まとめ

display: flex;で子要素を折り返す方法

まず横並びを設定する枠をwrapperクラスとして作成します。

// HTML
<div class="wrapper">wapperクラス</div>

// CSS
.wrapper {
 background: red;
 padding: 20px;
 width: 100%;
}

出力結果

wrapperクラス

子要素のwidthの合計を100%にする場合

次に子要素にwidth20%で5つdiv要素を入れます。
20% x 5なのでぴったりになるはずです。

// HTML
<div class="wrapper">
  <div class="card">cardクラス1</div>
  <div class="card">cardクラス2</div>
  <div class="card">cardクラス3</div>
  <div class="card">cardクラス4</div>
  <div class="card">cardクラス5</div>
</div>

// CSS
.wrapper {
 background: red;
 display: flex; // flexを設定することで中の子要素が横並びになる
 padding: 20px;
 width: 100%;
}
.card {
 width: 20%;
}

出力結果（背景色の設定を適宜を行いました）

cardクラス1

cardクラス2

cardクラス3

cardクラス4

cardクラス5

子要素のcardクラスを持った5つのdivがぴったり横並びになりましたね。

子要素のwidthの合計を100%が超えるようにする場合

それではcardクラスのwidthを25%に変更するとどうなるでしょうか？
25% x 5なのではみ出たり、最後のdivが下段に落ちそうな気がしますがこのように出力されます。

HTMLは同じ

// CSS
.wrapper {
 background: red;
 display: flex;
 padding: 20px;
 width: 100%;
}
.card {
 width: 25%; // 25%に変更
}

出力結果

cardクラス1

cardクラス2

cardクラス3

cardクラス4

cardクラス5

子要素のwidthが20%の時と同じ出力になってしまいます。

子要素が折り返すようにする方法

wrapperクラスに子要素（ここではcardクラス）が折り返しするようにflex-wrap: wrap;を設定します。

tips!

親要素（今回の例ではwrapperクラス）にflex-wrap: wrap;を設定するので間違わないように

HTMLは同じ

// CSS
.wrapper {
 background: red;
 display: flex;
 flex-wrap: wrap;
 padding: 20px;
 width: 100%;
}
.card {
 width: 25%;
}

出力結果

cardクラス1

cardクラス2

cardクラス3

cardクラス4

cardクラス5

まとめ

今回はdisplay: flex;を利用する場面で、子要素を折り返したい時の方法を記載しました。
解決に繋がれば幸いです。
それではまた。