こんにちは。「うどんとそば、どちらが好きか」と聞かれると、悩みすぎて答えられない麺好きのサイトウです。
ホームページのデザインを決めるとき、「これ、左から並べようか右から並べようか」と悩んだことはありませんか？また、「横に並べてみたけど、縦にしたらどうなるのかな？」「並び方を変えてみたいけど、コードを書き直すのは面倒だな」と思ったこと、ありますよね？
大丈夫です！最初は皆、思うようにレイアウトが組めず苦悩します。しかし、ポイントをおさえれば、配置を自在に操ることができますよ。
今回は、レイアウトを組む際にとても便利な【flex-direction】の
・応用的な使い方
目次
【flex-direction】とは
【flex-direction】の読み方
「フレックスディレックション」と読みます。flexは曲げる、directionは方向という意味です。
【flex-direction】の説明
要素が並ぶ方向を指定することができるプロパティです。 HTMLを変更することなく昇順降順などを切り替えることができます。とても便利なプロパティです。
【flex-direction】で利用できる値
【flex-direction】では以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| row | 初期値。子要素を左から右に並べる。 |
| row-reverse | 子要素を右から左に並べる。 |
| column | 子要素上から下に並べる。 |
| column-reverse | 子要素下から上に並べる。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 21~対応 |
| Edge | 完全対応 |
| Firefox | 非対応 |
| Internet Explorer | 10~対応 |
| Opera | 12.1~対応 |
| Safari | 7~対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 非対応 |
| Android 版 Opera | 12.1~ 対応 |
| iOS版Safari | 7~対応 |
| Samsung Internet | 完全対応 |
【flex-direction】の基本的な使い方
【flex-direction】の使い方
Flexbox（フレックスボックス）という複雑なレイアウトを簡単に組める書き方があります。細かい部分を自動で調節してくれるので、CSSのレイアウトでよく使われる手法です。その子要素のひとつがflex-directionです。
いきなり「子要素」といわれても、よくわからないですよね。flex-directionを使いこなすためには、Flexboxを理解する必要があります。順番にご説明します。
- Flexコンテナー（親要素）の中にFlexアイテム（子要素）を入れてHTMLを生成する
- CSSで親要素にdispley:flex;を記述したうえで、子要素のプロパティを追加する
FlexboxはFlexコンテナー（親要素）とFlexアイテム（子要素）の２つで構成されます。Flexコンテナー（親要素）の中にFlexアイテム（子要素）を入れてHTMLを生成するというのがひとつめの注意点です。そのうえで、CSSで親要素にdispley:flex;と書き、子要素のプロパティを追加するとレイアウトを組むことができます。
|
1 2 3 4 5 |
<div class="container"> <div class="item">アイテム１</div> <div class="item">アイテム2</div> <div class="item">アイテム3</div> </div> |
|
1 2 3 4 |
.container{ display: flex; flex-direction: row; } |
「displey:flex;」を書き忘れたり、Flexコンテナーの中にFlexアイテムが入っていないと flex-directionがうまく効かないのでご注意ください。
お盆の上に置かれたお皿は横に並べたり、縦に並べたり、一番左と右を入れ替えることも自由にできますね。このお皿の並べる向きを指定することができるのがflex-directionプロパティです。具体的には下記のようになります。
See the Pen
VwKzWPz by F Saito (@kero23)
on CodePen.
See the Pen
PoGKjWa by F Saito (@kero23)
on CodePen.
flex-directionプロパティ以外にも、折り返しやそろえ方を指定する子要素がありますので、チェックしてみましょう。子要素の部分だけ書き換えればすぐに配置を変えることができるため、レイアウトを調整する時にとても便利です！ぜひ試してみてください。
flex-directionは比較的新しいプロパティです。そのため、古いパソコンを使っていたり、ブラウザのversionによってはうまく表示されないことがあります。
これを防ぐために使うのが「ベンダープレフィックス」です。ベンダープレフィックスをコードに書くことで、どんなブラウザでも意図したとおりのレイアウトを表示させることができます。上記の対応ブラウザで「非対応」になっている個所も、ベンダープレフィックスを記載すれば対応可となります。
例えばこのようなものです。
|
1 2 3 4 5 6 |
.div { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } |
border-radiusプロパティの前に、見慣れない英語がついていますね。これがベンダープレフィックスです。主要ブラウザのベンダープレフィックスは下記のとおりです。
- -webkit- ・・・・GoogleChrome/Safari
- -moz-・・・・Firefox
- -ms-・・・・Internet Explorer
- -o-・・・・Opera
WEBの検証モードにすると、見かけることがありますよ。現在はベンダープレフィックスが必要になる機会は少なくなってきてはいますが、頭の片隅に覚えておきましょう。「-ms-」や「-webkit-」を見つけたら、ベンダープレフィックスを思い出してくださいね。
【flex-direction】と類似する要素との違い
「floatプロパティ」を使って要素を横並びにする方法もあります。こちらは、以前よく使用されていた手法ですが、flex-directionに比べて少々複雑です。
まず、要素ひとつひとつに方向を指定しなければなりません。そして、下にくる要素をうまく配置するために、クリアフィックスという記述をしなければなりません。少し面倒に感じますね。
現在ではflex-directionプロパティが主流になっていますので、あまり使用する機会はないでしょう。floatプロパティというものがあるということだけ、覚えておきましょう。
【flex-direction】の応用的な使い方
画像とテキストを交互に並べることもできます。
See the Pen
RwGZgpQ by F Saito (@kero23)
on CodePen.
親要素と子要素の書き方を間違えなければ、画像でもこのように配置することができ
親要素と子要素の書き方を間違えなければ、画像でもこのように配置することができます。いろいろ試してみるとおもしろいですよ！
まとめ
いかがでしたか？指定今回は「flex-directionプロパティ」をご紹介しました。
CSSのコードの一部だけ書き換えれば、瞬時に配置が換わる便利なプロパティです。レイアウトを調整する時に、ぜひ使ってみてください。こちらの記事が参考になればうれしいです。
参考文献：2019年 SBクリエイティブ株式会社｜1冊ですべて身につくHTML&CSSとWebデザイン入門講座【著】Mana
