flex-shrinkについて解説

flex-shrink は flex-grow と逆で、親要素に余ったスペースがなくすべての子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定するプロパティです。

それでは flex-shrink の指定方法を見ていきましょう。

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

.items {
　display: flex;
　gap: 16px;
}

.item {
　width: 100%;
　height: 50px;
　color: #fff;
}

.item:nth-child(1) {
　flex-shrink: 2;
　background-color: #ff0000;
}

.item:nth-child(2) {
　flex-shrink: 3;
　background-color: #0000ff;
}

上記のように子要素の横幅が100%ずつになっているので合計で200%になり、親要素をはみ出しているので flex-shrink が適用されます。flex-shrink を赤に2、青に3を指定しているので、その割合に応じてはみ出た部分の領域を縮めました。

今回は flex-shrink の合計値が5なので、赤は40%分が縮まり、青は60%分が縮まりました。

この記事では flex-shrink について解説しました。

flex-shrink は親要素に余ったスペースがあった場合、指定のある子要素が他の子要素に対してどれくらい伸びるかを指定するプロパティです。

flex-shrink は親要素に余ったスペースがなくすべての子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定するプロパティです。

flex-shrink を使えるようになると比率管理がとても楽になるのでぜひ、この記事を見て使いこなせるようになると嬉しいです。

最後までお読みいただきありがとうございます。