自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。-shrinkの使い方、アイテムの伸び、縮みの倍率を指定する!の解説になります!こんな方に読んでほしいCSSを学び始めた方へdisplayプロパティについて学びたい方へ今回はflex-grow・flex-shrinkで伸び、縮みの倍率についての解説になります。前回は、orderプロパティで指定した、flexboxアイテムの配置する順番についての解説になりました。CSS】orderの使い方、アイテムの配置する順番を指定する!Flexboxでは様々なレイアウトが可能になります。現在はほとんどのブラウザやデバイスが対応していますので、是非参考にしてみてください。指定項目が多いため、パートに分けて解説していきます。関連記事まとめflex-growの使い方についてflex-growプロパティとは、flexboxアイテムの幅の、伸びる倍率を指定します。※必ず、親要素にdisplay:flexまたはinline-flexを指定しておきましょう。inline-flex;1か2のどちらかを指定します。伸びる倍率(3);}指定できる値flex-grow今回はここを解説!flexboxアイテムの幅の、伸びる倍率を指定します。解説の記事ありますよflexboxコンテナを指定します。flex-growの指定についてflex-growプロパティとは、flexboxアイテムの幅の、伸びる倍率を指定します。初期値は0が設定されております。inline-flex」を親要素に指定することで、その要素をflexboxコンテナ(入れ物、箱)に指定できます。flexboxコンテナ(親要素)の子要素は自動的にflexboxアイテムのなり、さまざまなレイアウトが可能になります。inline-flex」を指定します。2子要素は自動的にflexboxアイテムになります。inline-flex」を指定はしていません。displayプロパティを指定していないため、子要素は横並びにはならず、左寄せの状態になっております。flex-grow使用例flex-growとは、flexboxアイテムの幅の、伸びる倍率を指定します。今回はflexboxアイテム1〜3を配置します。親要素に空きスペースがあった場合、指定した子要素が他の子要素に対してどれくらい伸びるかを指定します。1はflex-growを指定していないため、初期値の0が指定されます。「2、3」はflex-growを指定することにより、他の子要素と比較し調整してくれます。数値が大きい方が割り当て幅が広くなります。#febe3e;}flex-shrinkの使い方についてflex-shrinkプロパティとは、flexboxアイテムの幅の、縮む倍率を指定します。※必ず、親要素にdisplay:flexまたはinline-flexを指定しておきましょう。inline-flex;1か2のどちらかを指定します。縮む倍率(3);}指定できる値flex-shrink今回はここを解説!flexboxアイテムの幅の、縮む倍率を指定します。解説の記事ありますよflexboxコンテナを指定します。flex-shrinkの指定についてflex-shrinkプロパティとは、flexboxアイテムの幅の、縮む倍率を指定します。初期値は1が設定されております。初期値は1、負の値は指定できないflex-shrink使用例flex-shrinkとは、flexboxアイテムの幅の、縮む倍率を指定します。主な共通部分は上記を同じになります。※共通部分を一部変更しています、下記のコードで確認してください。今回はflexboxアイテム1〜3を配置します。flex-growと逆になります。親要素に空きスペースがなかった場合、指定した子要素が他の子要素に対してどれくらい縮むかを指定します。3はflex-shrinkを指定していないため、初期値の1が指定されます。「1、2」はflex-shrinkを指定することにより、他の子要素と比較し調整してくれます。数値が大きい方が割り当て幅が狭くなります。100%」に変更しました。flex-shrinkは、親要素に空きスペースがなかった場合のみ、適用されるため、flexboxアイテム(子要素)を100%に変更し余白を無くしました。flexの使い方、横並びを指定しよう!flexboxコンテナ(入れ物、箱)に指定します。【STEP02】flex-directionの使い方、配置する方向を指定するflex-directionとは、flexboxアイテムを配置する方向を指定します。【STEP04】orderの使い方、アイテムの配置する順番を指定するorderとは、flexboxアイテムの順番を指定します。【STEP06】flex-basis使い方、アイテムの幅を指定するflexboxアイテムの幅を指定します。【STEP07】justify-content使い方、アイテムの配置する位置を指定するflexboxコンテナのメイン軸の開始点から配置します。【STEP08】align-itemsの使い方、配置する位置を指定するflexboxアイテムのクロス軸に沿って配置する位置を指定します。【STEP09】align-selfの使い方、アイテムの位置を個別に指定するflexboxアイテムのクロス軸に沿って配置する位置を個別に指定します。【STEP10】align-contentの使い方、アイテムの縦方向の揃え位置を指定するflexboxアイテムが複数行あった際に、クロス軸に対して配置します。まとめ今回はこれで以上です。次回は「flexboxアイテムの幅を指定する」について解説します。POINTflex-growプロパティとは、flexboxアイテムの幅の、伸びる倍率を指定します。grow初期値は0が設定されております。grow親要素に空きスペースがあった場合、指定した子要素が他の子要素に対してどれくらい伸びるかを指定します。grow数値が大きい方が割り当て幅が広くなります。flex-shrinkプロパティとは、flexboxアイテムの幅の、縮む倍率を指定します。shrink初期値は1が設定されております。shrink親要素に空きスペースがなかった場合、指定した子要素が他の子要素に対してどれくらい縮むかを指定します。shrink数値が大きい方が割り当て幅が狭くなります。※必ず、親要素にdisplay:flexまたはinline-flexを指定しておきましょう。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。