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

CSS

2022.04.302022.05.14

この記事は約1分で読めます。

flexboxは奥が深いので、まだまだ勉強しなければならないことが多いですが、ここではデザインカンプからのコーディング課題時によく悩んだことの一つ、「子要素の幅を均一にする」ことについて( ..)φメモを残しておきます。

【コード例】HTML

&lt;div class="flex-container">
    &lt;div class="flex-item">&lt;/div>
    &lt;div class="flex-item">&lt;/div>
&lt;/div>

</div>

【コード例】CSS

.flex-container{
    display: flex;
}
.flex-item{
    width: 100%;
  　// または flex: 1;
}

.flex-container{

display: flex;

}

.flex-item{

width: 100%;

　// または flex: 1;

}

結論からかくと、各子要素（flex-item）に対して「flex:1」か「width：100%」を指定することで解決できました。

もし仮に、それでも解決しない時は、子要素に余計なmarginやpaddingが入っていないか確かめてみてください。

私は子要素のmargin-rightを見逃していて、なぜ均等幅にならないのかしばらく悩んでおりました＾＾；