T-file

一歩踏み出す勇気を全力で応援するブログ

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

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

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

早速みていきましょう。

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;を利用する場面で、子要素を折り返したい時の方法を記載しました。
解決に繋がれば幸いです。
それではまた。