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