はじめに
フレキシブルボックスを使っている際、画面サイズが小さくなったときにアイテムを縮めなくするやり方を調べたのでメモです。
やり方
アイテムが縮んでしまう修正前とアイテムを縮めなくした修正後のHTMLとCSSのサンプルを記載します。
修正前
画面サイズに応じてアイテムを縮めるスタイルが適用されています。
-
画面縮小前
-
画面縮小時
sample.cssでflex-itemクラスにflex:1;を適用することで、画面サイズを縮小すると等しく縮むアイテムになっています（詳細は参考へ）。
sample.html
<html lang="ja">
<head>
<title>さんぷる</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">サンプル１</div>
<div class="flex-item item2">サンプル２</div>
<div class="flex-item item3">サンプル３</div>
<div class="flex-item item1">サンプル４</div>
<div class="flex-item item2">サンプル５</div>
<div class="flex-item item3">サンプル６</div>
</div>
</body>
</html>
sample.css
.flex-container{
display: flex;
gap: 0.5rem;
}
.flex-item{
flex:1;
}
/* アイテムの色付け（本質じゃないです） */
.item1{
padding:0 auto;
background-color:red;
}
.item2{
padding:0 auto;
background-color:blue;
}
.item3{
padding:0 auto;
background-color:green;
}
修正後
sample.cssでflex-itemクラスにflex-grow: 0 flex-shrink:0 flex-basis: 200px(固定したい大きさ)を指定します。
アイテムの大きさが固定したい大きさになり、コンテナの大きさがアイテムの大きさに対して足りない際はアイテムが縮まないため、アイテムの大きさが固定されます（詳細は参考へ）。
sample.css
.flex-container{
display: flex;
gap: 0.5rem;
}
.flex-item{
flex:1;
}
/* 追加箇所 */
@media(max-width: 1200px){
.flex-item{
flex-grow: 0;
flex-shrink: 0;
flex-basis: 200px;/* 固定したい大きさ */
}
}
/* アイテムの色付け（本質じゃないです） */
.item1{
padding:0 auto;
background-color:red;
}
.item2{
padding:0 auto;
background-color:blue;
}
.item3{
padding:0 auto;
background-color:green;
}
- 画面縮小時
↑アイテムの大きさが固定されて画面サイズを縮小するとスクロールバーでスクロールが必要な状態になりました。
参考