CSS3を勉強したい

CSS3Cascading Style Sheets

flex-flow アイテムの並ぶ方向と折り返しを同時に設定

flex-flowプロパティでは、flexコンテナ内での、flexアイテムの並ぶ方向と折り返しを同時に指定することができます。flex-directionプロパティとflex-wrapプロパティの値を同時に指定することができるのです。

flex-directionかflex-wrap、どちらか片方の指定だけでも構いません。

書式はflex-flow: 値 値;です。(指定する値の順番は任意)

初期値は、flex-directionプロパティの初期値とflex-wrapプロパティの初期値に従う形で、row nowrapとなります。継承に関しても、各プロパティ同様、値の継承はありません。

flex-flow: row wrap; を指定した見本

flexコンテナにflex-flow: row wrap;を指定した時の見本です。flexアイテムを横方向に並べて、収まらないアイテムは折り返すように設定しています。

flex-direction: row;flex-wrap: wrap;を指定した場合と同じ結果になります。

HTMLコード

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

CSSコード

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

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

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