autoと同じ}フレックスは、コンテナ内の余白部分をコントロールして、各アイテムに割り当てます。heightプロパティ)とはちがうサイズになります。それをコントロールするのがflexプロパティです。フレックスは、コンテナ内のサイズがアイテムの合計サイズに足りないときアイテムサイズを縮小します。flexプロパティはそれもコントロールします。余白を割り当てたときアイテムサイズを拡大するか?コンテナ内のサイズが足りないときアイテムサイズを縮小するか?アイテムサイズの基準をどうするか?を指定します。動きをイメージしやすいように、サンプルをひとつずつ見ていきましょう。アイテムに指定します。拡大するアイテムの拡大を指定します。サンプルコードを実行していきます。フレックスの並びがタテとヨコで結果がちがうので、ヨコ並びの拡大タテ並びの拡大の2パターンでHTMLの結果を見ていきます。並びとその方向を変える方法tadtadya.comヨコ並びの拡大まずはCSSです。ボックスの見栄えを作ってフレックスのクラスを用意します。auto;}次にHTMLです。grow">3</div></div></div>ボックスの1と3は拡大できて2は拡大できないようにします。(拡大するものとしないものを比べるために混ぜました。)アイテムにgrowクラスを追加して拡大します。ついでに拡大なしも表示して比較します。auto"と同じ)ヨコ並びの拡大あり123ヨコ並びの拡大なし123アイテムのwidthのサイズが大きくなりました。アイテムのheightに変化がないことに注目です。並びがヨコのとき、ヨコのサイズ(width)が拡大。アイテムの拡大分のサイズは均等に配分される。(個々のアイテムのサイズは関係ない)並びがヨコのとき、タテのサイズ(height)は変わらない。タテ並びの拡大CSSに新たにクラスを追加します。column;}HTMLはコンテナのクラスを変更します。grow">3</div></div></div>合わせて拡大なしの結果も表示します。タテ並びの拡大あり123タテ並びの拡大なし123???変わりません。これはコンテナのheightのせいです。並びがヨコのとき、コンテナのwidthはWebページのwidth指定で決まっていました。heightは決まっていません。スクロールするからです。このまま拡大すると無限に拡大されます。それじゃあダメなので、フレックスは、コンテナのwidthやheightが無限に広がるときは、拡大しないようになっています。CSSに新たにクラスを追加して修正します。200px;}HTMLのコンテナのクラスにheightを追加します。-123タテ並びの拡大なし123アイテムのheightのサイズが大きくなりました。アイテムのwidthが変わってないことに注目です。並びがタテのとき、タテのサイズ(height)が拡大。アイテムの拡大分のサイズは均等に配分される。(個々のアイテムのサイズは関係ない)並びがタテのとき、ヨコのサイズ(widht)は変わらない。コンテナのサイズに上限がないときは、拡大指定されても拡大しない。widthが無限だと拡大しない。heightは関係ない。heightが無限だと拡大しない。widthは関係ない。デフォルトアイテムの縮小を指定します。『縮小する』がデフォルトなのは、1行につめて表示するプロパティがあるからです。1行に詰めたり折り返しを指定するtadtadya.comサンプルコードを実行していきます。フレックスの並びがタテとヨコで結果がちがうのでヨコ並びの縮小タテ並びの縮小の2パターンでHTMLの結果を見ていきます。ヨコ並びの縮小CSSに新たにクラスを追加します。none"をつけて縮小しません。width-30px">3</div></div>/div>ボックスの1と3は縮小できて2は縮小できないようにします。(縮小するものとしないものを比べるために混ぜました。)コンテナのwidth(70px)をアイテムのwidthの合計(90px)より小さくして、分かりやすいようにコンテナに色をつけます。アイテムのwidthの合計でないと縮小しません。ヨコ並びの縮小あり123ヨコ並びの縮小なし1231と3のアイテムのwidthが小さくなりました。アイテムのheightが変わらないことに注目です。縮小しないときコンテナからはみ出しすことも注目です。並びがヨコのとき、ヨコのサイズ(width)が縮小。アイテムの縮小分のサイズは均等に配分される。(個々のアイテムのサイズは関係ない)並びがヨコのとき、タテのサイズ(height)は変わらない。タテ並びの縮小CSSに新たにクラスを追加します。70px;}HTMLはコンテナのクラスを変更します。3px)より小さくして、分かりやすいようにコンテナに色をつけました。タテ並びの縮小あり123タテ並びの縮小なし123???縮小されません。これは、アイテムのheightを指定していないので、高さは中身の番号の高さに合わせて設定されます。言いかえると、中身を表示するためにはこれ以上小さくできません。このようにアイテムの縮小には限界があります。その限界は中身の表示できるサイズです。CSSに新たにクラスを追加して修正します。40px;}HTMLは、アイテムのクラスに"height-40px"を追加します。-123タテ並びの縮小なし1231と3のアイテムのheightが小さくなりました。コンテナに収めるほど縮小できなかったのではみ出しています。縮小では、まずコンテナのサイズいっぱいに収めるように小さくなります。できる限り小さくするわけではありません。)そして、縮小に限界がきたとき、コンテナに収められないときはあきらめます。アイテムのwidthが変わらないことに注目です。並びがタテのとき、タテのサイズ(height)が縮小。アイテムの縮小分のサイズは均等に配分される。(個々のアイテムのサイズは関係ない)並びがタテのとき、ヨコのサイズ(width)は変わらない。縮小はコンテナいっぱいに収めようとする。縮小には限界がありコンテナに収まらないとはみ出す。アイテムの中身のサイズより小さくできない。heightは関係ない。widthは関係ない。アイテムのwidth(height)プロパティのサイズを継承する。width(height)がautoのとき、contentと同じ効果がある。アイテムの中身のサイズに合わせる。新しい値なので古いブラウザでは使えないこともある。width(height)プロパティと同じ指定方法。ヨコ並びのとき、アイテムのwidthのサイズを指定する。タテ並びのとき、アイテムのheightのサイズを指定する。contentと同じ。アイテムのフォントサイズの5倍}アイテムは拡大したり縮小します。そのため基準のサイズが必要です。flex-basisはその基準を指定します。デフォルトは、アイテムのwidth(height)プロパティのサイズです。並びの方向(タテ・ヨコ)で、flex-basisの値がwidthとheightのどちらかを指します。flex-basisの値は、width(height)プロパティよりも優先します。サンプルコードを実行しましょう。CSSに新しいクラスを追加します。60px;}フレックスの並びがタテとヨコで結果がちがうのでヨコ並びのサイズ指定(width)タテ並びのサイズ指定(height)の2パターンでHTMLの結果を見ていきます。ヨコ並びのサイズHTMLです。basis">3</div></div></div>ボックスの1と3はflex-basisでサイズを指定します。2はサイズ指定しません。(比べるために混ぜました。)アイテムのクラス(basis)に60pxのサイズを指定します。ついでにサイズ指定なしも表示します。auto)ヨコ並びのサイズ指定あり123ヨコ並びのサイズ指定なし1231と3のサイズ(width)が変わりました。heightは変わらないことに注目です。並びがヨコのとき、ヨコのサイズがflex-basisで指定されたサイズになる。(widthは無効)サイズはアイテムごとに指定可能。並びがヨコのとき、タテのサイズ(height)は変わらない。タテ並びのサイズCSSに変更はありません。HTMLはコンテナのクラスを変更します。指定されたサイズになる。(heightは無効)サイズはアイテムごとに指定可能。並びがタテのとき、ヨコのサイズ(width)は変わらない。ヨコ並びのとき、flex-basisはアイテムのwidthプロパティより優先する。(widthの値は変えない)タテ並びのとき、flex-basisはアイテムのheightプロパティより優先する。(heightの値は変えない)拡大・縮小のリミット指定フレックスのプロパティは、拡大・縮小の有無、基準サイズは指定できますが、拡大の上限、縮小の下限は指定できません。min-***)でコントロールできます。min-***はフレックスを使っても効果があります。min-heightまとめフレックスを使って、アイテムの拡大・縮小、基準サイズの指定方法をご紹介しました。heightどおりにサイズが固定されることはあまりありません。アイテムのサイズをコントロールする基準はflexプロパティです。これが分かっていないと自動的なサイズ変更に振り回されるので注意しましょう。flexプロパティはショートハンドです。3つのプロパティをまとめて指定します。個別のプロパティは公式ドキュメントでも推奨されていません。将来削除される可能性大です。紹介しましたが覚えなくていいです。auto;}フレックスのすごいところはこれだけではありません。ここで説明すると長くなるのでとりあえずここまでにします。アイテムの拡大・縮小・サイズを操作するCSS3flexflex-growflex-shrinkflex-basisHTML&CSSの本どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。関連記事SNSでも記事を配信しています。*メールアドレス(公開されません。*このフォームを使用することにより、このウェブサイトによるデータの保管および取り扱いに同意するものとします。コメントデータの処理方法の詳細はこちらをご覧ください。(全16回)日本国憲法を読む。views今上天皇の読み方。Vol.3天皇の皇位継承の解決策は既にある。Vol.2天皇の男系・女系・双系の違い。Vol.14図で見りゃわかる。このサイトの使用を継続することで、その使用に同意したとみなされます。コントロール方法を含む詳細についてはこちらをご覧ください。(1)プロフィールシステムエンジニア&プログラマ。SIerに12年、フリーと会社員を交互に繰り返すこと4年。心疾患をわずらってしまい実家に戻って静養中。何もしないのはヤバいので、今まで得てきたものをWebサイトで発信しながら少しだけ活動中。静養しながらできることをして、迷走して、転んで、怪我してをくり返している。コメント等いただいておりますが、回答・回答は遅くなりがちです。(1週間以内で早い方。)20%くらいの力しか出せてないので、その点はご了承ください。コメント等のコミュニケーションは面と向かって話すのと同じだと思っています。初対面でいきなりケンカ腰で来られると、『いきなり刺されるかも?』と同じくらいに感じるので、100%レスポンスがあるとはかぎりません。そのエネルギーがないだけなんですが...くわしく見るSNSでも記事を配信しています。ただ屋ぁのブログ.topこの記事を気に入ったらぜひシェアも!!。