web制作のしおり

日々の学習をアウトプットします。

40.フレックスボックスを使う② ~できることはたくさん~

本日も昨日に引き続き、フレックスボックスについて学習していきます。

 

参考までに昨日の記事です。

39.フレックスボックスを使う ~レイアウトの大きな手助け~ - web制作のしおり

 

では早速やっていきましょう。

 

ボックスの中がいっぱいになったら、どうする? ~ flex-wrap ~

フレックスボックスの子要素をたくさん詰めても、キチンと並べて表示してくれます。

では、ボックスに子要素が入りきらない場合にどうやって表示するでしょう?

それを制御するのがflex-wrapプロパティです。

 

どんな設定ができるのか確認していきます。

 

まずは、

 

flex-wrap : nowrap;

 

デフォルトで、この値になっています。

nowrapでは、子要素がボックスに入りきらないときに1列に横並びになるよう

子要素のサイズを縮めて」配置してくれます。

 

 

次に、

 

flex-wrap : wrap;

 

wrapでは子要素が横並びでボックスに入りきらないときに、要素のサイズは維持したまま折り返して配置してくれます。

この時、フレックスボックス内に意図しない空白(おおむね右側)と

高さの変化があるのは注意したい所です。

 

最後に、

 

flex-wrap : wrap-reverse;

 

こちらはwrapの反対で、下から配置していくだけで挙動は同じです。

左から右への順序は同じで、上下の配置方向のみが反転していることに注意です。

 

 

縦と横の配置をまとめて制御 ~ flex-flow ~

ここまでで、「flex-direction」と「flex-wrap」について学習しました。

 

flex-flow はその両方をまとめて制御できるプロパティです。

 

flex-flow : row wrap;

 

directionとwrapで使用した値をそのまま併記することで

両方をまとめて設定できます。

便利ですね。

この例では

左から右に横並び、ボックスに入りきらないときは折り返して配置

です。

 

横並びの配置場所を制御 ~ justify-content ~

flex-directionは配置方向と順序を決めるプロパティでした。

justify-contentは配置場所を制御するプロパティです。

なので、基本子要素は左から右の順序で配置される点に注意です。

では確認していきましょう。

 

justify-content : flex-start;

フレックスボックスに対して、子要素を左によせて表示します。

これがデフォルトです。

 

 

justify-content : flex-end;

フレックスボックスに対して、子要素を右に寄せて表示します。

margin-left : autoに近いですね。

因みにflex-direction : row-reverse;とは子要素の順序が逆です。

 

justify-content : center;

フレックスボックスに対して、子要素を中央に寄せて表示します。

margin-left : auto;とmargin-right : auto;を両方設定したときに近いですね。

 

justify-content : space-between;

フレックスボックスに対して、子要素の両端は一致させ、

間にある子要素を隙間が均等になるように配置します。

これは初級編でもお世話になっているプロパティです。

 

justify-content : space-around;

space-betweenの派生のようなプロパティ。

子要素の間の隙間が均等になるようにし、

その隙間の半分をフレックスボックスと

左右両端の子要素の間にも設定します。

正直、私は現時点で使いどころがイメージできないプロパティです。

 

justify-content: space-evenly;

子要素間、フレックスボックスと子要素の間、

すべてのスペースを均等にするプロパティです。

 

まだまだ、続きます。

長くなってきたので、また明日にしたいと思います。

 

今日のまとめ

  • 折り返しはwrap
  • 縦横折り返しまとめて設定はflow
  • 配置と隙間に関してはjusify-content

 

フレックスボックスに対して設定するプロパティは明日で終了の予定です。

一度デフォルトを確認して、覚えておくべきだなと感じました。

その点も含めて明日は進めていきたいと思います。

 

では、また。