flexboxは奥が深いので、まだまだ勉強しなければならないことが多いですが、ここではデザインカンプからのコーディング課題時によく悩んだことの一つ、「子要素の幅を均一にする」ことについて( ..)φメモを残しておきます。
【コード例】HTML
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
【コード例】CSS
.flex-container{
display: flex;
}
.flex-item{
width: 100%;
// または flex: 1;
}
結論からかくと、各子要素(flex-item)に対して「flex:1」か「width:100%」を指定することで解決できました。
もし仮に、それでも解決しない時は、子要素に余計なmarginやpaddingが入っていないか確かめてみてください。
私は子要素のmargin-rightを見逃していて、なぜ均等幅にならないのかしばらく悩んでおりました^^;