【Flexbox】要素を折り返して複数行にする「flex-wrap」の使い方

2020年8月26日2023年1月22日

フレックスボックスで要素が収まりきらない場合はflex-wrapを使うことで折り返して複数行で表示できるようになります。

要素を折り返す：flex-wrap

目次へ

要素を折り返す：`flex-wrap`

要素を折り返すための大事なポイント

親要素に以下を設定する。
- display:flex;
- flex-wrap: wrap;
子要素には何も設定しない。

See the Pen
flex-wrap by shiakisudev (@shiakisu)
on CodePen.

CSS

.parent {
  height:300px;
  width: 300px;
  background-color:lime;
  display:flex;/* ここは子要素divの上下左右を決めるための指定*/
  flex-wrap: wrap;
  align-items: flex-start; /* 垂直方向の指定*/

}
.childA {
  background-color:skyblue;
}
.childB {
  background-color:yellow;
}
.childC {
  background-color:pink;
}
.parent div {
  height:100px;
  width: 100px;
  border:solid 1px;
}