【8/27まで】Udemyの人気コースが今なら1,200円から!!

【Flexbox】要素を折り返すflex-wrapの使い方

【CSS3】【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;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です