今回はflexbox内の子要素をコンテンツ量に関わらず均等幅にする方法を紹介します。
flexboxの子要素を均等幅にする方法
display: flexを指定した子要素にwidth: 100%を指定するだけです。
See the Pen
by wagashi000327 (@wagashi000327)
on CodePen.
<div class="box">
<div class="item">1です</div>
<div class="item">これは2つ目の要素ですこれは2つ目の要素です</div>
<div class="item">これは3つ目の要素です</div>
</div>.box {
display: flex;
}
.item {
width: 100%;
}
たったこれだけでコンテンツ量がどれだけ違っていても均等幅で固定することができます！
もちろんブラウザ幅を縮めても均等幅をキープしてくれます。
ただし、親要素にflex-wrap: wrapを指定してしまうとこの方法は使えないので注意しましょう。
まとめ
地味な小技ですが意外と均等幅で要素を並べたいときってあると思うので知っておくといいんじゃないかなと思います。
