flexboxを用いた時の子要素の幅を均一にしたい

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を見逃していて、なぜ均等幅にならないのかしばらく悩んでおりました^^;

この記事を書いた人