【CSS】サイズ違いの横並びの要素の端を揃えたい【備忘録】

こんにちは、ワタナベです。

大分気温が上がって暑さを感じるようになってきました。

今回は、サイズ違いの横並びの要素の端と端をそろえたいときの備忘録。

どういうことかというと、下記をご覧ください。

SAMPLE

See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.

↑のように一番端が綺麗に揃っています。改行させても端はガタガタになりません。
やり方は簡単で、横並びになっている要素に「flex-grow: 1;」を追加するだけです。

動的要素だとこの辺が難しかったのですが、これでなんとかなりそうです(^^)/

▼THANKS！

 miyattiblog.com  13 users

CSSでよく見かける【flex:1】を分かりやすく解説

https://miyattiblog.com/explanation-of-flex-property/

Flexboxを勉強し始めると、flexプロパティを使用して「flex: 1;」と書かれている物をよく見かけると思います。 CSS初心者のころは、良く分からずなんとなく使っている方も多いのではないでし

それではまた次回。

ご閲覧ありがとうございました♪