Web制作において、要素を「縦並びにしたい」「逆並びにしたい」と思うことはありませんか？
flex-direction プロパティを使用することで、簡単にflexアイテムの方向や並び順を変えられます。flexアイテムの配置を変えることは、レイアウトのアクセントづけやレスポンシブ対応の際に便利です。
この記事では flex-direction の使い方を解説します。サンプルを用意しておりますので、それぞれの値を指定したときにどのような表示になるのかを確認しながら学習していきましょう。
- flex-directionとは
- flex-directionの基本形
- flex-directionの値
- flex-directionの実践的な使い方
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
Flexboxについて全体的に詳しく知りたい！という方には、こちらの記事がおすすめです。Flexboxで使用するプロパティや実践的な使い方を解説しています。ぜひ参考にしてください。
目次
flex-directionとは
flex-direction は、flexアイテムが並ぶ方向や開始の位置を指定するプロパティです。例えばflexアイテムは最初の状態だと左寄せで横並びになっていますが、flex-direction を使用することで縦並びや逆並びに変更できます。
flex-direction を使用すれば、下記画像のような表現が可能です。
flex-direction を使いこなすためには、Flexboxの主軸とクロス軸の概念について理解しておくことが大切です。
flexboxにおける主軸とクロス軸
- 要素が横並び（ flex-direction の値が row もしくは row-reverse ）のとき、横方向が主軸で縦方向がクロス軸
- 要素が縦並び（ flex-direction の値が column もしくは column-reverse ）のとき、縦方向が主軸で横方向がクロス軸
つまり、flex-direction で指定した方向が主軸となります。
flexアイテムの挙動は主軸を基準としています。例えば要素間に余白を与える justify-content を使用した場合には、主軸方向の余白が空くことに注意しましょう。
justify-content の使い方はこちらの記事で詳しく解説しています。
flex-directionの基本形
flex-direction はflexアイテムを並べる方向を指定するプロパティです。flexアイテムを、通常の横並びだけでなく縦並びや逆並びにすることも可能です。
flex-direction はflexアイテムに有効なプロパティであるため、display: flex;と併用して親要素（flexコンテナ）に記述します。
以下がCSSの基本形です。
.flexbox {
display: flex;
flex-direction: 値;
}
flex-directionの値
以下は flex-direction に指定できるおもな値の一覧です。
- row：左寄せ、左から順に要素を配置する（横並び）
- row-reverse：右寄せ、右から順に要素を配置する（横並び）
- column：上寄せ、上から順に要素を配置する（縦並び）
- column-reverse：下寄せ、下から順に要素を配置する（縦並び）
「 reverse をつけると逆順になる」と覚えると分かりやすいです。
それぞれの値を指定したときに表示がどうなるのかを確認していきましょう。
row - 左寄せ、左から順に配置（初期値）
flex-direction: row;はflexアイテムを左から順に横並びにする指定です。
例として①~⑤までの番号をつけたflexアイテムを表示させます。
HTMLの記述
<div class="flexbox">
<div class="flex-item">①</div>
<div class="flex-item">②</div>
<div class="flex-item">③</div>
<div class="flex-item">④</div>
<div class="flex-item">⑤</div>
</div>.flexbox {
display: flex;
flex-direction: row;
text-align: center;
}
.flex-item {
background: orange;
border: 1px solid #000;
width: 50px;
}出力結果
①~⑤までの要素が左から順に横並びになっています。row は初期値であるため、flex-direction を指定しない場合にもこの値が適用されます。
row-reverse - 右寄せ、右から順に配置
flex-direction: row-reverse;は、flexアイテムを右から順に横並びにする指定です。
HTMLの記述
<div class="flexbox">
<div class="flex-item">①</div>
<div class="flex-item">②</div>
<div class="flex-item">③</div>
<div class="flex-item">④</div>
<div class="flex-item">⑤</div>
</div>.flexbox {
display: flex;
flex-direction: row-reverse;
text-align: center;
}
.flex-item {
background: orange;
border: 1px solid #000;
width: 50px;
}出力結果
flexアイテムが右寄せになり、右から順番に横並びで表示されました。
column - 上寄せ、上から順に配置
flex-direction: column;は、flexアイテムを上から順に縦並びにする指定です。
HTMLの記述
<div class="flexbox">
<div class="flex-item">①</div>
<div class="flex-item">②</div>
<div class="flex-item">③</div>
<div class="flex-item">④</div>
<div class="flex-item">⑤</div>
</div>.flexbox {
display: flex;
flex-direction: column;
text-align: center;
}
.flex-item {
background: orange;
border: 1px solid #000;
width: 50px;
}出力結果
flexアイテムが縦並びになり、上から順に配置されました。
column-reverse - 下寄せ、下から順に配置
flex-direction: column-reverse;は、flexアイテムを下から順に縦並びにする指定です。
下寄せになっていることを確認するために親要素の height を200pxに指定します。
HTMLの記述
<div class="flexbox">
<div class="flex-item">①</div>
<div class="flex-item">②</div>
<div class="flex-item">③</div>
<div class="flex-item">④</div>
<div class="flex-item">⑤</div>
</div>.flexbox {
display: flex;
flex-direction: column-reverse;
text-align: center;
height: 200px;
}
.flex-item {
background: orange;
border: 1px solid #000;
width: 50px;
}出力結果
flexアイテムが縦並びになり、下から順に配置されました。
flex-directionの実践的な使い方
flex-direction ではflexアイテムの逆並びや縦並びが実装できます。しかし、これだけでは flex-direction を使用する具体的なイメージが湧かない方もいらっしゃるのではないでしょうか。
ここでは flex-direction の実践的な使い方を解説します。
レスポンシブ対応で使用する
PCでの表示で横並びにしたとき、タブレットやスマートフォンでは表示崩れを起こしていることがあります。
表示崩れの主な原因は、画面幅が小さくなったときに横並びの要素が幅内に収まらないことです。そこで、画面幅が小さいときには横並びの要素を縦並びに変更したいケースが出てきます。
しかしdisplay: flex;を打ち消してしまうと、flexアイテムの性質を生かすことができません。
そこで flex-direction を使用すれば、display: flex;を維持したまま要素を縦並びにできます。
以下はレスポンシブ対応時の記述例です。
/*PC表示*/
.flexbox {
display: flex;
flex-direction: row;/**/
}
/*モバイル表示*/
@media screen and (max-width: 480px){
.flexbox{
flex-direction: column;/*flexアイテムを縦並びに変更*/
}
}
レイアウトにアクセントを加えるために使用する
justiy-content と擬似クラスの :nth-child を併用すれば、画像とテキストを左右交互に配置するレイアウトを作成できます。
:nth-child で奇数・偶数どちらかの要素を指定し、justify-content で逆並びにします。
<div class="flexbox">
<img class="flex-img" src="img/草原の写真.jpg" alt="" class="flex-img">
<div class="flex-item">
<h2 class="flex-title">タイトル</h2>
<p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</div>
<div class="flexbox">
<img class="flex-img" src="img/草原の写真.jpg" alt="" class="flex-img">
<div class="flex-item">
<h2 class="flex-title">タイトル</h2>
<p class="flex-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</div>.flexbox {
display: flex;
justify-content: center;
}
.flexbox:nth-child(even) {
flex-direction: row-reverse;
}
.flex-img {
width: 43%;
padding: 20px;
}
.flex-title {
font-size: 24px;
font-weight: bold;
padding-bottom: 30px;
}
.flex-item {
width: 43%;
justify-content: flex-start;
padding: 20px;
}
.flex-text {
line-height: 1.8rem;
}
このように、レイアウトにアクセントを加える目的でも flex-direction を使用します。
まとめ
flex-direction はflexアイテムの方向や並び順を指定するプロパティです。flexアイテムの並び方を変えるレイアウトは、Web制作の場面で非常によく使われています。flex-direction の使い方を学習して、実装できるレイアウトを増やしていきましょう。
flex-direction まとめ
- flexアイテムの並び方を指定するプロパティ
- 逆並び・縦並びが可能
- レスポンシブ対応時やレイアウトのアクセントづけに使用する
関連記事
flexアイテムの並び方を指定するプロパティにはいくつか種類があります。要素の中央寄せや右寄せ、要素同士の余白などの配置を指定するには justify-content プロパティを使用します。
justify-content の使い方は、こちらの記事で詳しく解説しています。ぜひ参考にしてください。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
