出来るようになる事
親要素のサイズが変更された時、真ん中の状態を経由せずに、縦並びと横並びを切り替える
画像引用元
なぜこの処理が必要？
一部の要素だけが大きくなると、大きく表示される要素をオススメのコンテンツだと勘違いしてしまう事があるから
実装する
Flexbox内の要素のサイズを自動で変更する
最小幅 : 親要素の33%
最大幅 : 親要素の100%
で子要素のサイズが自動で変更されるようになりました。
See the Pen
Qiita-612c3c82f4238fcab2b1-1 by lp0ql (@lp0ql)
on CodePen.
flex-basis
flex-basisは、子要素の基本幅（子要素になってほしいサイズ）を設定します。すると、Flexbox内で、なるべくflex-basisに指定したサイズに近づくようにブラウザが調整してくれます。
See the Pen
Qiita-612c3c82f4238fcab2b1-2 by lp0ql (@lp0ql)
on CodePen.
999rem, -999rem
flex-basisで999remや-999rem等の値を設定すると、なるべく要素を大きく又は小さくしようとします。
しかし、min-widthとmax-widthによって阻まれるので、999remの時はmax-widthで指定されたサイズである100%に、
-999remの時は
このように値が無効になり、min-widthで設定された33%になります。
(最初と同じ状態)
画像引用元
999 と -999 を親要素のサイズで切り替える
calc(40rem - 100%) この計算を行う事で、親要素が40rem以上の時に結果が負になり、40remより小さい時に正の数になります。
これを利用して
flex-basis: calc(40rem - 100%) * 999);
とする事で、flex-basisに非常に高い値または非常に低い値を設定します。そして、このような状況では999を使うのが一般的なようです。
See the Pen
Qiita-612c3c82f4238fcab2b1-2 by lp0ql (@lp0ql)
on CodePen.
@ media よりもこの方法が良い理由
ビューポートのサイズに関係なく利用出来るので、任意の横幅の親要素内で利用する事が出来る
参考
heydonworks.com - The Flexbox Holy Albatross
最後に
間違い・アドバイスがあれば是非教えて下さい！
↧