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

Date
May 10, 2019
Flexboxで要素を横並びにした時に、👇のように赤丸をwidthを指定しているにも関わらず、潰れてしまう。
Flex Itemのwidthの合計が、親要素のwidthよりも大きくなってしまうと発生するっぽい。
不足しているスペースを各Flex Itemで分配し合っているらしい🧐
この場合
① Flex Itemのwidthの合計: (300 + 20 =)320[px]
② 親要素のwidth: 200[px]

→不足しているスペース: 200[px] - 320[px] = -120px
この -120px を2つのフレックスアイテムで分け合うことになる。
特に指定がない場合、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は便利だが、まだまだ知らない挙動があるな...😥

参考