かんたんCSS3 flex アイテムの拡大・縮小・サイズを操作する

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
css3 image
イラストACの画像をもとに加工しています。

CSS3のフレックスは、コンポーネントの配置を変える便利な機能です。

アイテムのサイズや余白サイズが自動で配分されるので、アイテムサイズと余白の操作はとても重要です。

今回はアイテムサイズの操作方法です。いま、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って説明します。

flex アイテムの拡大・縮小・サイズをまとめて指定(ショートハンド)

.items {
  flex: [ <flex-grow> <flex-shrink>? || <flex-basis> ] | none;
}
初期値0 1 auto
flex-growアイテムの自動拡大のあり/なし
flex-shrinkアイテムの自動縮小のあり/なし
flex-basisヨコ並びの場合アイテムのwidth。
タテ並びの場合アイテムのheight。
[]グループ。囲まれた範囲内が1つの書式。
?直前のものは省略可。
||半角スペース区切り。順不同。1つ指定可。
|または。or

.items {
  // shrinkを省略
  flex: 1 auto; // growとshrinkは1
}
.items {
  // basisを省略
  flex: 1 1; // 1 1 autoと同じ
}
.items {
  flex: auto 0 1; // 0 1 autoと同じ
}
.items {
  flex: none; // 0 0 autoと同じ
}

 

フレックスは、コンテナ内の余白部分をコントロールして、各アイテムに割り当てます。

これでアイテムのサイズ(width, heightプロパティ)とはちがうサイズになります。それをコントロールするのがflexプロパティです。

またフレックスは、コンテナ内のサイズがアイテムの合計サイズに足りないときアイテムサイズを縮小します。flexプロパティはそれもコントロールします。

  • 余白を割り当てたときアイテムサイズを拡大するか?
  • コンテナ内のサイズが足りないときアイテムサイズを縮小するか?
  • アイテムサイズの基準をどうするか?

を指定します。

動きをイメージしやすいように、サンプルをひとつずつ見ていきましょう。

アイテムに指定します。

flex-grow アイテムの拡大

0拡大しない。デフォルト
1拡大する

アイテムの拡大を指定します。サンプルコードを実行していきます。

フレックスの並びがタテとヨコで結果がちがうので、

  • ヨコ並びの拡大
  • タテ並びの拡大

の2パターンでHTMLの結果を見ていきます。

ヨコ並びの拡大

まずはCSSです。ボックスの見栄えを作ってフレックスのクラスを用意します。

CSS
.sample .container .box {
  background: rgba(255, 144, 130, 0.7);
  color: #fff;
  margin: 3px;
  padding: 0 3px;
  text-align: center;
}
.sample .flex{
  display: flex;
}
.sample .grow {
  flex: 1 0 auto;
}

次にHTMLです。

HTML
<div class="sample">
<div class="container flex">
  <div class="box grow">1</div>
  <div class="box">2</div>
  <div class="box grow">3</div>
</div>
</div>

ボックスの1と3は拡大できて2は拡大できないようにします。

(拡大するものとしないものを比べるために混ぜました。)

アイテムにgrowクラスを追加して拡大します。ついでに拡大なしも表示して比較します。

拡大ありアイテムに"flex: 1 0 auto"追加
拡大なし未指定("flex: 0 1 auto"と同じ)
ヨコ並びの拡大あり
1
2
3
ヨコ並びの拡大なし
1
2
3

アイテムのwidthのサイズが大きくなりました。でも、アイテムのheightに変化がないことに注目です。

  • 並びがヨコのとき、ヨコのサイズ(width)が拡大。
  • アイテムの拡大分のサイズは均等に配分される。(個々のアイテムのサイズは関係ない)
  • 並びがヨコのとき、タテのサイズ(height)は変わらない。

タテ並びの拡大

CSSに新たにクラスを追加します。

CSS
.sample .direction-column {
  flex-direction: column;
}

HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-column">
  <div class="box grow">1</div>
  <div class="box">2</div>
  <div class="box grow">3</div>
</div>
</div>

合わせて拡大なしの結果も表示します。

タテ並びの拡大あり
1
2
3
タテ並びの拡大なし
1
2
3

???変わりません。これはコンテナのheightのせいです。

並びがヨコのとき、コンテナのwidthはWebページのwidth指定で決まっていました。

でもheightは決まっていません。スクロールするからです。このまま拡大すると無限に拡大されます。

それじゃあダメなので、フレックスは、コンテナのwidthやheightが無限に広がるときは、拡大しないようになっています。

CSSに新たにクラスを追加して修正します。

コンテナのheightを指定するCSS
.sample .height {
  height: 200px;
}

HTMLのコンテナのクラスにheightを追加します。

HTML
<div class="sample">
<div class="container flex direction-column height">
  <div class="box grow">1</div>
  <div class="box">2</div>
  <div class="box grow">3</div>
</div>
</div>
タテ並びの拡大あり - コンテナheight指定 -
1
2
3
タテ並びの拡大なし
1
2
3

アイテムのheightのサイズが大きくなりました。でも、アイテムのwidthが変わってないことに注目です。

  • 並びがタテのとき、タテのサイズ(height)が拡大。
  • アイテムの拡大分のサイズは均等に配分される。(個々のアイテムのサイズは関係ない)
  • 並びがタテのとき、ヨコのサイズ(widht)は変わらない。

コンテナのサイズに上限がないときは、拡大指定されても拡大しない。

ヨコ並びwidthが無限だと拡大しない。heightは関係ない。
タテ並びheightが無限だと拡大しない。widthは関係ない。

flex-shrink アイテムの縮小

0縮小しない
1縮小する。デフォルト

アイテムの縮小を指定します。『縮小する』がデフォルトなのは、1行につめて表示するプロパティがあるからです。(flex-wrap)

サンプルコードを実行していきます。フレックスの並びがタテとヨコで結果がちがうので

  • ヨコ並びの縮小
  • タテ並びの縮小

の2パターンでHTMLの結果を見ていきます。

ヨコ並びの縮小

CSSに新たにクラスを追加します。

CSS
.sample .width-30px {
  width: 30px;
}
.sample .width-80px {
  width: 80px;
}
.sample	.no-shrink {
  flex: none;
}
.sample .color-container {
  background: rgba(130, 255, 144, 0.5);
}

アイテムのno-shrinkクラスには、"flex: none"をつけて縮小しません。

次にHTMLです。

HTML
<div class="sample">
<div class="container flex width-80px color-container">
  <div class="box width-30px">1</div>
  <div class="box width-30px no-shrink">2</div>
  <div class="box width-30px">3</div>
</div>
/div>

ボックスの1と3は縮小できて2は縮小できないようにします。

(縮小するものとしないものを比べるために混ぜました。)

コンテナのwidth(70px)をアイテムのwidthの合計(90px)より小さくして、分かりやすいようにコンテナに色をつけます。

コンテナのwidth < アイテムのwidthの合計

でないと縮小しません。

ヨコ並びの縮小あり
1
2
3
ヨコ並びの縮小なし
1
2
3

1と3のアイテムのwidthが小さくなりました。でも、アイテムのheightが変わらないことに注目です。

そして、縮小しないときコンテナからはみ出しすことも注目です。

  • 並びがヨコのとき、ヨコのサイズ(width)が縮小。
  • アイテムの縮小分のサイズは均等に配分される。(個々のアイテムのサイズは関係ない)
  • 並びがヨコのとき、タテのサイズ(height)は変わらない。

タテ並びの縮小

CSSに新たにクラスを追加します。

CSS
.sample .height-70px {
  height: 70px;
}

HTMLはコンテナのクラスを変更します。

HTML
<div class="sample">
<div class="container flex direction-column height-70px color-container">
  <div class="box">1</div>
  <div class="box no-shrink">2</div>
  <div class="box">3</div>
</div>
</div>

ヨコ並びと同じように、コンテナのheight(70px)をアイテムのheightの合計(27 * 3px)より小さくして、分かりやすいようにコンテナに色をつけました。

タテ並びの縮小あり
1
2
3
タテ並びの縮小なし
1
2
3

???縮小されません。これは、アイテムのheightを指定していないので、高さは中身の番号の高さに合わせて設定されます。

言いかえると、中身を表示するためにはこれ以上小さくできません。このようにアイテムの縮小には限界があります。その限界は中身の表示できるサイズです。

CSSに新たにクラスを追加して修正します。

CSS
.sample .height-40px {
  height: 40px;
}

HTMLは、アイテムのクラスに"height-40px"を追加します。

HTML
<div class="sample">
<div class="container flex direction-column height-70px color-container">
  <div class="box height-40px">1</div>
  <div class="box height-40px no-shrink">2</div>
  <div class="box height-40px">3</div>
</div>
</div>
タテ並びの縮小あり - アイテム高さ変更 -
1
2
3
タテ並びの縮小なし
1
2
3

1と3のアイテムのheightが小さくなりました。でも、コンテナに収めるほど縮小できなかったのではみ出しています。

縮小では、まずコンテナのサイズいっぱいに収めるように小さくなります。

(ヨコの並びの結果。できる限り小さくするわけではありません。)

そして、縮小に限界がきたとき、コンテナに収められないときはあきらめます。

また、アイテムのwidthが変わらないことに注目です。

  • 並びがタテのとき、タテのサイズ(height)が縮小。
  • アイテムの縮小分のサイズは均等に配分される。(個々のアイテムのサイズは関係ない)
  • 並びがタテのとき、ヨコのサイズ(width)は変わらない。
  • 縮小はコンテナいっぱいに収めようとする。
  • 縮小には限界がありコンテナに収まらないとはみ出す。
  • アイテムの中身のサイズより小さくできない。
並びヨコ[ コンテナのwidth < アイテムのwidthの合計値 ] でないと縮小しない。
heightは関係ない。
並びタテ[ コンテナのheight < アイテムのheightの合計値 ] でないと縮小しない。
widthは関係ない。

flex-basis アイテムのサイズ指定

autoアイテムのwidth(height)プロパティのサイズを継承する。
width(height)がautoのとき、contentと同じ効果がある。
contentアイテムの中身のサイズに合わせる。
新しい値なので古いブラウザでは使えないこともある。
<width>width(height)プロパティと同じ指定方法。
  • ヨコ並びのとき、アイテムのwidthのサイズを指定する。
  • タテ並びのとき、アイテムのheightのサイズを指定する。

.items {
  flex: 0 1 content;
}
.items {
  // flex: 0 1 contentと同じ。中身のサイズに合わせる
  width: auto;
  flex: 0 1 auto;
}
.items {
  flex: 0 1 50px;  // ピクセル指定
}
.items {
  flex: 0 1 50%;  // コンテナのサイズの50%
}
.items {
  flex: 0 1 5em;  // アイテムのフォントサイズの5倍
}

アイテムは拡大したり縮小します。そのため基準のサイズが必要です。flex-basisはその基準を指定します。

デフォルトは、アイテムのwidth(height)プロパティのサイズです。並びの方向(タテ・ヨコ)で、flex-basisの値がwidthとheightのどちらかを指します。

またflex-basisの値は、width(height)プロパティよりも優先します。

サンプルコードを実行しましょう。まずはCSSです。

CSSに新しいクラスを追加します。

CSS
.sample	.basis {
  flex: 0 0 60px;
}

フレックスの並びがタテとヨコで結果がちがうので

  • ヨコ並びのサイズ指定(width)
  • タテ並びのサイズ指定(height)

の2パターンでHTMLの結果を見ていきます。

ヨコ並びのサイズ

HTMLです。

HTML
<div class="sample flex">
<div class="container">
  <div class="box basis">1</div>
  <div class="box">2</div>
  <div class="box basis">3</div>
</div>
</div>

ボックスの1と3はflex-basisでサイズを指定します。2はサイズ指定しません。

(比べるために混ぜました。)

アイテムのクラス(basis)に60pxのサイズを指定します。ついでにサイズ指定なしも表示します。

サイズ指定ありアイテムに"flex: 0 0 60px"追加
サイズ指定なしアイテムにflex指定なし(デフォルトのflex: 0 1 auto)
ヨコ並びのサイズ指定あり
1
2
3
ヨコ並びのサイズ指定なし
1
2
3

1と3のサイズ(width)が変わりました。でも、heightは変わらないことに注目です。

  • 並びがヨコのとき、ヨコのサイズがflex-basisで指定されたサイズになる。(widthは無効)
  • サイズはアイテムごとに指定可能。
  • 並びがヨコのとき、タテのサイズ(height)は変わらない。

タテ並びのサイズ

CSSに変更はありません。HTMLはコンテナのクラスを変更します。

HTML
<div class="sample flex">
<div class="container flex direction-column">
  <div class="box basis">1</div>
  <div class="box">2</div>
  <div class="box basis">3</div>
</div>
</div>
タテ並びのサイズ指定あり
1
2
3
タテ並びのサイズ指定なし
1
2
3
  • 並びがタテのとき、タテのサイズが flex-basis 指定されたサイズになる。(heightは無効)
  • サイズはアイテムごとに指定可能。
  • 並びがタテのとき、ヨコのサイズ(width)は変わらない。
  • ヨコ並びのとき、flex-basisはアイテムのwidthプロパティより優先する。(widthの値は変えない)
  • タテ並びのとき、flex-basisはアイテムのheightプロパティより優先する。(heightの値は変えない)

拡大・縮小のリミット指定

フレックスのプロパティは、拡大・縮小の有無、基準サイズは指定できますが、拡大の上限、縮小の下限は指定できません。

でも、別のプロパティ(max-***, min-***)でコントロールできます。

width, heightプロパティは、条件によってflex-basisを優先しますが、max-***, min-***はフレックスを使っても効果があります。

ヨコ並びの拡大上限max-width
タテ並びの拡大上限max-height
ヨコ並びの縮小下限min-width
タテ並びの縮小下限min-height

まとめ

フレックスを使って、アイテムの拡大・縮小、基準サイズの指定方法をご紹介しました。

フレックスは、余白を自動的に配分したり、アイテムの拡大・縮小があったりしてwidth, heightどおりにサイズが固定されることはあまりありません。

アイテムのサイズをコントロールする基準はflexプロパティです。これが分かっていないと自動的なサイズ変更に振り回されるので注意しましょう。

flexプロパティはショートハンドです。3つのプロパティをまとめて指定します。しかし、個別のプロパティは公式ドキュメントでも推奨されていません。

将来削除される可能性大です。とりあえず紹介しましたが覚えなくていいです。

.items {
  // flex: 0 1 auto; と同じ
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

フレックスのすごいところはこれだけではありません。まだまだほかにもあります。

ここで説明すると長くなるのでとりあえずここまでにします。

前のページ
かんたんCSS3 order フレックスアイテムの並びの順序を変える
かんたんCSS3 flex 左(上)・中央・右(下)に寄せて余白を操作する
次のページ
HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!