CSS3を勉強したい

CSS3Cascading Style Sheets

flex-wrap アイテムの折り返しの有無と方向を設定

flex-wrapプロパティでは、flexコンテナ内での、flexアイテムの折り返しの有無(単一行に押し込むのかそれとも折り返すのか)と、折り返す場合の、行を積み重ねる方向を設定します。

flex-wrapの指定はflexコンテナにします。また、値の継承はされません

使用する値と内容は次の通りです。

nowrap
初期値
折り返しなし。
wrap
折り返す。
wrap-reverse
折り返しした場合の、積み重なる方向が下から上になる。

flex-wrap: wrap;を指定

flexコンテナにflex-wrap: wrap;を指定した時の見本です。

HTMLコード

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>

CSSコード

ul {
    display: flex;
    flex-wrap: wrap;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
    width: 200px;
}

上のコードの結果が下です。

  • ホーム
  • 会社概要
  • 商品
  • 問い合わせ

横幅200pxを指定したflexアイテムはflexコンテナに収まりません。その場合は、flexアイテムが折り返して表示されます。

flex-wrap: wrap-reverse;を指定

上方向に折り返してくるflex-wrap: wrap-reverse;を指定した時の見本です。

HTMLコード

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>

CSSコード

ul {
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
    width: 200px;
}

上のコードの結果が下です。

  • ホーム
  • 会社概要
  • 商品
  • 問い合わせ

折り返して表示されるflexアイテムが上に積み重なります。