flexプロパティとは？子要素の伸縮率をショートハンドで書ける便利CSS

こんにちは！AndHAコーディング部です。

みなさん、「flexbox子要素の幅がうまく調整できない…」という経験は無いですか？
本記事ではそんな悩みを解決しつつ、より効率的なコーディングができる「flexプロパティ」についてご紹介します！

子要素の伸縮率をショートハンドのように書けるflexプロパティ

flexプロパティとは

flexプロパティとは、flexbox子要素に対して伸び縮みの比率を指定できるプロパティです。

具体的には、「flex-grow」「flex-shrink」「flex-basis」という3つの値を、ショートハンドのようにまとめて指定することができる便利なCSSです。

子要素のサイズ（伸縮する方法や比率）を一括で簡単に指定できるため、より効率的なコーディングが可能になります。

※CSSの基本書式は { プロパティ: 値; } となりますが、この記事では、「プロパティ」は左側に入れる内容、「値」は右側に入れる内容として解説します。

そもそも「flex-grow」「flex-shrink」「flex-basis」って？

そもそも、「flex-grow」「flex-shrink」「flex-basis」が分からない方も多いかと思います。

簡単に言うと、比率や幅を制御するflexプロパティで、それぞれ下記のような意味合いをもっているCSSです。

• flex-grow ＝ 伸長（初期値：0）
• flex-shrink ＝ 圧縮（初期値：1）
• flex-basis ＝ 長さ（初期値：auto）

なお、「flex-grow」「flex-shrink」「flex-basis」については、下記記事でより詳しく解説しています。
これらを理解していないと今回の記事の内容は難しく感じてしまうと思うので、ぜひ一度ご覧ください。

実際の記述の仕方（基本形）

まずは実際のコードから。以下が基本形です。

.content {
  display: flex;
}
.content_child {
  flex: auto;
}

flexプロパティは、flexbox子要素に対して有効なCSSです。そのため、flexbox親要素に display: flex; を、flexbox子要素にこのflexプロパティを記述します。

flexプロパティの初期値

flexプロパティの初期値は「0 1 auto」です。
ようは、flex-grow: 0; 、flex-shrink: 1;、flex-basis: auto; の状態です。

flex: 0 1 auto; と指定すると、以下のように、flex子要素の横幅はそれぞれの最小の横幅となります。

See the Pen flex: 0 1 auto; by ha-01 (@hasamplecom) on CodePen.

/* flex-grow: 1; flex-basis: 50px; と同意 */
.content_child {
  flex: 1 50px;
}

/* flex-grow: 2; flex-shrink: 2; と同意 */
.content_child{
  flex: 2 2;
}