Categories: HTML&CSS

【Flexbox】要素を折り返して複数行にする「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;
}

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp