レスポンシブで必要なプロパティflex-basis、flex-grow、flex-shrinkの説明(html,css)

今現在、記事を書き換えています。

こんにちは tanaka です。

今回は、flex-basis、flex-grow、flex-shrinkの説明です。

これらのflex群は、
「レスポンシブページ」を作る時に使います。

「レスポンシブページ」とは、
PC、スマホどちらも兼用できるページのことです。

表示する幅が変わると「ページが組み変わる」仕組みになっています。

この「ページが組み変わる」時に
flex-basis、flex-grow、flex-shrinkを使います。

それぞれの役目は以下の通りです。

1:flex-basis(基準値)
2:flex-grow(広げる)
3:flex-shrink(せばめる)

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

文字化けします

<コピー、ペーストすると文字化けします>

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

flex-basis、flex-grow、flex-shrinkとは?

<レスポンシブとは>

レスポンシブとは、
PC、スマホどちらも兼用できるページのことです。

表示する幅が変わるとページが組み変わる仕組みになっています。

flex-basis、flex-grow、flex-shrink何に使う?

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群は、
何かの事情で幅が変わった時

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

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

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

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

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

そして、
幅が変わると

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

プロパティflex群の種類

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

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

(4)flex    = 一括設定


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

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

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

flex版のwidthという感じです。(widthよりflex-basisが優先)

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

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をコピーしました