2019/05/10

[CSS] Flexbox内の要素が潰れてしまう問題に２度と引っかからないために...

Flexboxで要素を横並びにした時に、👇のように赤丸をwidthを指定しているにも関わらず、潰れてしまう。

Flex Itemのwidthの合計が、親要素のwidthよりも大きくなってしまうと発生するっぽい。

不足しているスペースを各Flex Itemで分配し合っているらしい🧐

この場合

① Flex Itemのwidthの合計: （300 + 20 =）320[px]
② 親要素のwidth: 200[px]

→不足しているスペース: 200[px] - 320[px] = -120px

この -120px を２つのフレックスアイテムで分け合うことになる。

特に指定がない場合、flexプロパティは👇のようになっている。

（※今回のように不足スペースがあるときは、 flex-shrinkと flex-basis が使用される。）

flex-grow: 0;
flex-shrink: 1; 
flex-basis: auto; /*(=各Flex Itemで指定されたwidth)*/

計算方法

どのように分け合っているかを、実際に計算してみる。

1. 縮小の比率の計算

まず各Flex Itemをどのくらいの比率で縮小させるかを計算する。

{class="dot"}の縮小比 : {class="item"}の縮小比
= ( {class="dot"} の flex-basis ) × ( {class="dot"} の flex-shrink )
 : ( {class="item"} の flex-basis ) × ( {class="item"} の flex-shrink )
= 20[px] × 1 : 300[px] × 1
= 1 : 15

2. 縮小後の幅の計算

実際に不足しているスペース「-120px」を、縮小比に応じて各Flex Itemが分け合う。

{class="dot"} のwidth
= 20[px] - 120[px] × ( 1/16 )
= 20 - 7.5
= 12.5[px]

{class="item"} のwidth
= 300[px] - 120[px] × ( 15/16 )
= 300 - 112.5
= 187.5[px]

つぶさないようにするには…🤔？

各Flex Itemに

flex-shrink: 0;

を指定する。

Flexboxは便利だが、まだまだ知らない挙動があるな…😥

参考

#tech