CSSでよく見かける【flex:1】を分かりやすく解説 | みやっちブログ

Flexboxを勉強し始めると、flexプロパティを使用して「flex: 1;」と書かれている物をよく見かけると思います。 CSS初心者のころは、良く分からずなんとなく使っている方も多いのではないでしょうか？ この記事では、何気なく書いてしまう「flex: 1;」について丁寧に解説していきます。 「flex: 1;」とは？ 結論から書くと、flexプロパティは、flex-grow、flex-shrink、flex-basisの3つのプロパティのショートハンド（省略形）です。 そのため、「flex: 1;」を理解するためには、まず上記3つのプロパティを理解する必要があります。 ここではさらっと流しますが、「flex: 1;」は、「flex-grow: 1;」、「flex-shrink: 1;」、「flex-basis: 0;」の3つ同時に指定したことと同じ意味になります。 ここからは、上記3

[wdscratch]

flexのショートハンドについて図解付きで解りやすい解説