実践で学ぶRuby on rails 〜仮説千本ノック〜

プログラマーとして独立するため日々スキルアップに励んでいます。優れたプログラマは仮説を立てるのがうまい。そこを目指して仮説を立てては検証する日々です!!

フレックスボックスで横並びにしたブロックレベル要素のwidthを調整

やりたいこと

width1024pxのdivに子要素を2つ持たせ、フレックスボックスで横並びにして、子要素のwidthを調整したい

 

解決法

2つの子要素のうち、左にはpタグで囲ったimage要素、右にはdivで囲ったinput要素を置いた場合で、右のdiv要素の幅はどうなるのか考える。

 

「子要素のwidthはデフォルトでは親要素の100%となる」というルールから、子要素であるdivは、親要素であるdivのwidth1024と同じ幅に揃いそうだが、フレックスボックスにより、左にはimage要素がいることから、親要素の幅いっぱいに広がれないし、かと言って、親要素の幅からimage要素の幅を引いた、残りの幅いっぱいにも広がってくれず、divが内包するinput要素がもつ幅が、そのまま子要素divの幅となる。

 

では、子要素divが内包するinputのwidthはどうあるべきか。

想定するのは、ウインドウ幅の変化に合わせて伸縮するwidthなので、

pxではなく、%で設定することになる。

 

結論として、100%にすれば良い。

ただし、%とするには、親のdivにも基準となるwidhtを持たせないといけないので、840pxと設定する。

 

固定値にすると伸縮しないように思えるが、

この場合、840pxと言っても、その幅は「子要素のinputで決まる」というルールが優先されるので、

ウインドウ幅を縮めると、(840pxとは関係なく)子要素divのwidthが縮むので、子要素のinputは、常に縮んだdivの100%のwidthとなるため、合わせて縮んでくれる。