CSS3を勉強したい

CSS3Cascading Style Sheets

flex-direction でアイテムの並ぶ方向を設定する

flex-directionプロパティでは、flexアイテムが横に並ぶのか縦に並ぶのかの設定を行います。

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

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

row
初期値
flexコンテナの書字方向に従う。つまり、特殊なケースを除いて、左から右への水平軸を表す。
row-reverse
flexコンテナの主軸方向がrowの逆になる。
column
flexコンテナの主軸が上から下へと縦方向になる。
現在のブロック軸と同じ方向になる。
column-reverse
flexコンテナの主軸方向がcolumnの逆になる。

flex-direction: row;(初期値)を指定

初期値であるflex-direction: row;を指定した時の見本です。

HTML
    
<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>
CSS
    
ul {
    display: flex;
    flex-direction: row;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
}

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

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

初期値であるため、flex-directionを指定しない場合と同じ挙動です。

flex-direction: row-reverse; を指定

flex-direction: row-reverse;を指定した時の見本です。

HTML
    
<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>
CSS
    
ul {
    display: flex;
    flex-direction: row-reverse;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
}

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

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

右に寄った状態での逆並びになります。

flex-direction: column; を指定

flex-direction: column;を指定した時の見本です。

HTML
    
<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>
CSS
    
ul {
    display: flex;
    flex-direction: column;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
}

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

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

縦に並ぶということで、flexコンテナにdisplay: flex;を指定しない場合と同じ挙動になります。

flex-direction: column-reverse; を指定

flex-direction: column-reverse;を指定した時の見本です。

HTML
    
<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>
CSS
    
ul {
    display: flex;
    flex-direction: column-reverse;
    background-color: #555;
    color: #fff;
}
li {
    padding: 0 10px;
}

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

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