flex-shrinkプロパティを理解する 親要素に余白がない時、子要素の縮小率を指定する
flex-shrinkとは？
flex-shrink プロパティは、 子要素のwidthの合計が親要素のwidthをオーバーする時、 子要素に指定した比率の分だけ縮小します。
つまり、子要素のwidthの合計が親要素のwidthをオーバーしていない時、flex-shrinkを指定しても何も変化はありません。
子要素のwidthの合計が、親要素のwidthをオ―バーせず、余白がある時は、 必要に応じ、flex-growを指定する。
flex-shrinkの指定方法
<div class="wrapper">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
<div class="item3">Item3</div>
</div>
<style>
.wrapper {
display: flex;
width: 500px;
}
.item1,
.item2,
.item3 {
width: 200px; /* 子要素*3=600 親要素をオーバー */
height: 100px;
}
</style>親要素500px、子要素各200pxを指定したはずが、 flexboxの特性により、親要素をはみ出して表示されることはありません。
flex-shrinkの初期値は1で、親要素のwidthが3分割され、均等に割り振られます。
.item1 {
flex-shrink: ;
}
.item2 {
flex-shrink: ;
}
.item3 {
flex-shrink: ;
}
マイナスの値を指定することはできません。
子要素すべてにflex-shrink: 0;を指定すると、 CSSで指定したwidthになり、親要素をはみ出します。
それぞれの子要素に違う値を指定すると、その比率で各要素のwidthが縮小します。
flexboxの主軸と交差軸に注意！
上記の記述は、flex-direction（主軸）がrow（横並び）の場合です。
flex-directionがcolumnの場合は、縦方向の余白を埋めます。
参考
まとめ
- flex-shrink プロパティは、flexアイテムの縮小率を決める。
- 初期値は1で、0にするとCSSで指定したwidthになる。
- 子要素のwidthの合計が、親要素のwidthをオーバーする時に、必要に応じて指定する。
- flexboxの主軸と交差軸に注意が必要。
こんな記事も読まれています。
-
【CSS】box-sizing: border-boxとは？指定するメリットは？
CSSのbox-sizing: border-boxについて解説します。指定することによりレイアウトしやすくなります。また、親要素からはみ出すことも防げます。
-
【CSS】box-sizing: border-boxとは？指定するメリットは？
CSSのflexboxで上下左右、中央の配置の方法について説明します。justify-contentで左右の配置を、align-itemsで上下の配置を決めます。flex-start,center,flex-endの使い方。
- リンク
-
【CSS】transformのrotateとtransform-originについて。回転させる基点を変える
CSSのrotateについて解説します。指定によりZ軸、X軸、Y軸で回転させます。またtarnsform-originを指定することにより、回転する基点を移動させることができます。
-
【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる
【CSS】filterの使い方について解説します。画像をぼかしたり、色の変化を適用させるには？ brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、saturate、sepiaの設定方法
- リンク
-
【CSS】perspective と transform-style で3D表現。立方体を作ってみよう。
CSSのperspectiveとtransform-styleについて解説します。CSSだけで３Dを表現できます。立方体をつくり、それを応用する方法も紹介します。
-
【CSS】animation パート2 アニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について
【CSS】animation のアニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について解説します。。
- リンク
-
【css】grid-templateでtwitter風に画像を表示させる方法
grid-templateを使えば、画像を思い通りに配置できます。twitter風に画像を表現することができます。
-
リンク
-
【CSS】マウスを乗せた（ホバーした）時、サムネイル画像を拡大・縮小する方法
CSSでマウスをホバーした時、サムネイル画像を拡大・縮小する方法。overflow: hiddenやtransform: scale();を使い、拡大、縮小させます。
