flex-shrinkを用いたレイアウトシフトの防止方法

レイアウトシフトが発生する場合、flex-shrink: 0;のようなプロパティを使用して防止することが可能です。

Flexboxのflex-shrinkプロパティは、フレックスコンテナ内の空間が不足した場合に、フレックスアイテムが縮小する能力を制御します。この値を0に設定すると、アイテムは縮小しないようになり、その結果、レイアウトシフトが発生する可能性が低くなります。

具体的なCSSコードは以下のようになります：

.item {
  flex-shrink: 0;
}

この設定を適用することで、.itemクラスが適用された要素はフレックスボックス内で縮小されなくなります。