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;
}
上のコードの結果が下です。
- ホーム
- 会社概要
- 商品
- 問い合わせ