かんたん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プロパティはそれもコントロールします。

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

を指定します。

動きをイメージしやすいようにじっさいにサンプルを1つずつ見ていきましょう。

アイテムに指定します。

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は無効)
  • サイズはアイテム1つずつに指定可能。
  • 並びがヨコのとき、タテのサイズ(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は無効)
  • サイズはアイテム1つずつに指定可能。
  • 並びがタテのとき、ヨコのサイズ(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;
}

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

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

HTML&CSSの本
post-cta-image

たくさんあるなかで、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

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


HTML&CSSの本2選

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

*

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

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