39.フレックスボックスを使う ～レイアウトの大きな手助け～
今までfloatを使ってレイアウトをしていた部分を
教材ではフレックスボックスを使ってササッと仕上げていたのに驚愕しました。
いい意味で情報感度を高めて置くべきだと反省しました。
ということで、今回は時間を割いてフレックスボックスについて学習します。
フレックスボックスって？
HTMLの親子要素に対して、親にCSSプロパティを設定することで子要素のレイアウトをしやすくする為の仕組み。とでもいいましょうか。
親にスタイル適用すると、子要素を割りと思い通りに配置できるよ
ぐらいの捉え方で良いと思います。
細かいところは手を動かしながら学んでいくスタイルです。
では早速触ってみます。
何はともあれフレックスボックスを作る
レイアウトを整えたい要素の親に対して、スタイルを適用します。
スタイルと言っても内容はとっても簡単です。
以下のHTMLを使って確認していきましょう。
<div class="box__flex-test">
<div>子要素1</div>
<div>子要素2</div>
<div>子要素3</div>
</div>
この場合、レイアウトを整えたいのは子要素のdivタグ達。
ですので、親要素である「box__flex-test」クラスに対してスタイルを適用します。
CSSで
.box__flex-test{
display : flex ;
}
これで、フレックスボックスの完成です。
なんと、これだけで子要素は横に並んで表示されるようになるのです。
ちなみに、デフォルトで子要素は左から右に並びます。
要素をdivタグで囲んで左右別にfloatして、最後にクリアして…
とか考えなくても基本形はこれだけなんです。かなり衝撃でした。
話を戻します。
豊富なフレックスボックス関連のプロパティ
「こういうレイアウトにしたい！」
「こういう方法で制御したい！」
そんな願いを叶えてくれるかのように、
フレックスボックスには様々なプロパティが用意されています。
では、１つずつ見ていきましょう。（長くなりそうな予感
要素の方向性を決める ～ flex-direction ～
flex-directionはフレックスボックス内の
子要素の方向(並び方)を制御できるプロパティです。
デフォルトでは、
flex-direction : row;
となっていて、これは左から右に横並びで表示するという意味です。
逆に、右から左に横並びで表示したい。そんなときには
flex-direction : row-reverse;
を設定することで実現可能です。単純にリバースがついただけですね。
他には、
flex-direction : column;
があり、この場合は上から下に表示します。
先程のHTMLの書いたままの順序で表示されます。
基本ブロック要素は縦に表示される性質があるので、
特別感はあまりないかもしれませんが…。
flex-direction : column-reverse;
先ほどと同じようにreverseをつけることで、下から上に要素が配置されます。
flex-directionプロパティを実際に使う場合は、フレックスボックスに直接スタイルを適用します。
.box__flex-test{
display : flex ;
flex-direction : row;
}
こんな形ですね。
まだまだ、沢山あるのですが、長くなりますので、明日に続きます。
今日のまとめ
- 以前はブラウザがフレックスボックスに対応していない物があった。
- いまは殆どのブラウザが対応済み。floatを無理に使う必要はない。
- 親要素にdisplay : flexを適用して使う。
- flex-directionプロパティは子要素の並び方(方向)を制御できる
これはレイアウトがはかどりますね。
Webカンプを見て、
「ココはフレックスボックスにして、このプロパティを使えばいいな」
みたいなことがわかるようになりたいです。
では、また。
