flex-basis、flex-grow、flex-shrinkの説明

こんにちは tanaka です。

今回は、
cssプロパティ
flex群 の説明です。

flex群は、
何かの事情でが変わった時

ボックスモデルを、
一定の比率で
広げたり、せばめたりするプロパティ群です。


プロパティflexの種類は、
3種類 + 一括指定があります。

(1)flex-basis = 基本値を決める
(2)flex-grow = 広げる設定
(3)flex-shrink = せばめる設定

(4)flex    = 一括設定


今回は、
(4)flex    = 一括設定
の説明は省きます。

それでは、
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

flex群の説明

プロパティflex群とは

flex群は、
何かの事情で幅が変わった時

ボックスモデルを、
一定の比率で幅を
広げたり、せばめたりするプロパティ群です。

flex群は、
だけに
影響を与えるプロパティです。
(高さは関係ありません)

何かの事情で幅が変わる時とは

何かの事情で幅が変わる時は
どんな時でしょうか?

それは、
PC用、タブレット用、スマートフォン用と
表示する幅が変わった時です。

そして、
幅が変わると

自動で切り替わるページを
作った時とも言えるでしょう。

PC用、タブレット用、スマートフォン用
それぞれで幅が変わる。

PC用のページ(横長)

画像blog-flexible-flex06

タブレット用のページ(やや縦長)

画像blog-flexible-flex05

スマートフォン用のページ(ものすごく縦長)

画像blog-flexible-flex06

コードは、
このような感じで作っていきますが
説明は省略します。

html

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="responsive.css" rel="stylesheet" />
</head>


css

@media screen and (max-width: 780px) {
  タブレット用css
}

@media screen and (max-width: 480px) {
  スマートフォン用css
}

プロパティflex群の種類

プロパティflex群の種類は、
3種類 + 一括指定があります。

(1)flex-basis = 基本値を決める
(2)flex-grow = 広げる設定
(3)flex-shrink = せばめる設定

(4)flex    = 一括設定


今回は、
(4)flex    = 一括設定
は、省きます。

(1)flex-basis = 基本値を決める

flex-basisは、
幅の基本値を決めます。

flex版のwidthという感じです。

あくまで基本値なので、
必ずこの値になるというわけではなく

flex-grow
flex-shrink
からの命令で変更が加われば
基本値も変わっていきます。

値は2つあります。
 1:auto
 2:数値(px など)

flex-basis: auto;
flex-basis: 600px;

可変させたい幅の
cssに入れると良いでしょう。

(2)flex-grow = 広げる設定

flex-growは、
幅が広がった時、
広がりでできたスペースを

どのように配分するかを決める
プロパティです。

値は数値のみで

指定された数値が、
広がりでできたスペースを配分する
比率になります。
(本体の比率ではなく、スペースを配分する比率)

0を指定すると
スペースが配分されなくなり。

そのボックスモデルの幅は
変わらなくなります。

flex-grow: 0  = 左
flex-grow: 1  = 中央
flex-grow: 1  = 右

画像blog-flexible-flex02

左は0なので幅は変わりません。

flex-grow: 0;
flex-grow: 1;
flex-grow: 1;

(3)flex-shrink = せばめる設定

flex-shrinkは、
幅がせばまった時、

本体よりせばまった量を

どのように配分するかを決める
プロパティです。

値は数値のみで

指定された数値が、
せばまった量を配分する
比率になります。
(本体の比率ではなく、せばまった量を配分する比率)

0を指定すると
そのボックスモデルの幅は
変わらなくなります。

例)

本体1 = flex-shrink: 1
本体2 = flex-shrink: 2

本体1 = 50px
本体2 = 50px

全体が30px縮まった
(30pxを比率で配分)

 = 10px : 20px

本体1は、10px縮まって 40px
本体2は、20px縮まって 30px

flex-shrink: 0  = 左
flex-shrink: 1  = 中央
flex-shrink: 1  = 右

画像blog-flexible-flex03

左は0なので幅は変わりません。

flex-shrink: 0;
flex-shrink: 1;
flex-shrink: 1;

まとめ

プロパティflex群とは

flex群は、
何かの事情で幅が変わった時

ボックスモデルを、
一定の比率で幅を
広げたり、せばめたりするプロパティ群。

flex群は、
だけに
影響を与えるプロパティ。
(高さは関係ありません)

プロパティflex群の種類

プロパティflex群の種類は、
3種類 + 一括指定。

(1)flex-basis = 基本値を決める
(2)flex-grow = 広げる設定
(3)flex-shrink = せばめる設定

(4)flex    = 一括設定

flex-basis = 基本値を決める

flex-basisは、
幅の基本値を決める。

flex版のwidthという感じ。

あくまで基本値なので、
必ずこの値になるというわけではなく

変更が加われば変わる。

値は2つ。
 1:auto
 2:数値(px など)

flex-basis: auto;
flex-basis: 600px;
flex-grow = 広げる設定

flex-growは、
幅が広がった時、
広がりでできたスペースを

どのように配分するかの比率を決める
プロパティです。

値は数値のみ

0を指定すると
幅が変わらなくなる。

flex-grow: 0  = 左
flex-grow: 1  = 中央
flex-grow: 1  = 右

画像blog-flexible-flex02
flex-grow: 0;
flex-grow: 1;
flex-grow: 1;
flex-shrink = せばめる設定

flex-shrinkは、
幅がせばまった時、

本体よりせばまった量を

どのように配分するかを決める
プロパティです。

値は数値のみで

0を指定すると
そのボックスモデルの幅は
変わらなくなる。

flex-shrink: 0  = 左
flex-shrink: 1  = 中央
flex-shrink: 1  = 右

画像blog-flexible-flex03
flex-shrink: 0;
flex-shrink: 1;
flex-shrink: 1;

以上、
flex-basis、flex-grow、flex-shrinkの説明
の話でした。

ありがとうございました。

タイトルとURLをコピーしました