Flexboxでアイテムを同じサイズにする： flex、flex-basis、min-widthとmax-widthの使い方
2024-04-02
CSS Flexboxでアイテムを同じサイズにする方法
flex: 1 を使う
すべてのアイテムを同じサイズにする最も簡単な方法は、flex プロパティに 1 を指定することです。これは、すべてのアイテムがコンテナの残りのスペースを均等に分割することを意味します。
.container {
display: flex;
}
.item {
flex: 1;
}
このコードは、container 内のすべての .item が同じサイズになるようにします。
flex-basis プロパティは、アイテムの初期サイズを指定します。flex: 1 と組み合わせることで、アイテムを同じ最小サイズにすることができます。
.container {
display: flex;
}
.item {
flex: 1;
flex-basis: 100px;
}
min-width と max-width プロパティは、アイテムの最小幅と最大幅を指定します。これらのプロパティを使用して、アイテムを同じサイズにすることができます。
.container {
display: flex;
}
.item {
min-width: 100px;
max-width: 100px;
}
Flexboxを使用してアイテムを同じサイズにする方法はいくつかあります。どの方法を使用するかは、プロジェクトの要件によって異なります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox サンプル</title>
</head>
<body>
<div class="container">
<div class="item">アイテム 1</div>
<div class="item">アイテム 2</div>
<div class="item">アイテム 3</div>
</div>
</body>
</html>
.container {
display: flex;
}
.item {
flex: 1;
/* または */
/* flex-basis: 100px; */
/* または */
/* min-width: 100px; */
/* max-width: 100px; */
}
実験
上記のコードをコピーして、HTMLファイルとCSSファイルを作成します。ブラウザでファイルを開くと、Flexboxを使用してアイテムを同じサイズにする方法を確認できます。
Flexboxを使用してアイテムを同じサイズにする方法は他にもあります。詳細については、上記の参考資料を参照してください。
Flexboxでアイテムを同じサイズにする他の方法
calc() 関数を使用して、アイテムのサイズを動的に計算することができます。
.item {
width: calc(100% / 3);
}
grid レイアウトを使う
Flexbox以外にも、アイテムを同じサイズにするために grid レイアウトを使用することができます。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item {
grid-area: 1 / 1;
}
const items = document.querySelectorAll('.item');
for (const item of items) {
item.style.width = '100px';
}
css flexbox
