もっと早く知りたかった！CSS Flexboxでできる固定幅列レイアウトの賢いテクニック
CSS Flexbox で固定幅列を設定する方法
方法 1: flex-basis プロパティを使用する
flex-basis プロパティは、Flexbox アイテムの初期サイズを指定します。 固定幅列を設定するには、flex-basis に希望の幅をピクセル単位で設定します。 例えば、各列を 200px の幅に設定するには、以下の CSS を使用します。
.container {
display: flex;
}
.column {
flex-basis: 200px;
}
方法 2: width プロパティを使用する
width プロパティは、要素の幅を直接設定します。 Flexbox アイテムの場合、width プロパティは flex-basis と同じように動作します。 以下の CSS は、方法 1 と同じ結果になります。
.container {
display: flex;
}
.column {
width: 200px;
}
min-width と max-width プロパティを使用して、Flexbox アイテムの幅の範囲を制限することもできます。 これにより、列が設定した幅よりも小さくなるのを防ぎ、必要に応じて大きくなることもできます。 以下の CSS は、各列を最低 200px、最大 300px の幅に設定します。
.container {
display: flex;
}
.column {
min-width: 200px;
max-width: 300px;
}
補足
- 上記の方法は、単一の Flexbox コンテナー内の列にのみ適用されます。 複数の Flexbox コンテナーが並んでいる場合は、それぞれのコンテナーで個別に設定する必要があります。
- Flexbox アイテムのコンテンツが設定した幅よりも大きい場合は、
flex-growプロパティを使用してアイテムを伸縮させることができます。
これらの方法を組み合わせることで、様々な固定幅列レイアウトを作成することができます。 ご自身のニーズに合わせて最適な方法を選択してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定幅列レイアウト</title>
<style>
.container {
display: flex;
}
.column {
flex-basis: 200px; /* 各列の幅を 200px に設定 */
border: 1px solid #ccc; /* 列にボーダーを追加して見やすくする */
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="column">列 1</div>
<div class="column">列 2</div>
<div class="column">列 3</div>
</div>
</body>
</html>
このコードを実行すると、以下のようになります。
各列は 200px の幅で、コンテンツは中央揃えになっています。
このサンプルコードを参考に、ご自身のニーズに合わせてレイアウトを調整してみてください。
CSS Flexbox で固定幅列を設定するその他の方法
calc() 関数を使用して、列の幅を数学式で計算することができます。 例えば、親コンテナーの幅の 50% を 2 つの等幅列に分配するには、以下の CSS を使用します。
.container {
display: flex;
}
.column {
flex-basis: calc(50% - 20px); /* 親コンテナー幅の50% - 左右20pxのマージン */
margin: 10px; /* 列間にマージンを追加 */
}
グリッドレイアウトを使用する
Flexbox 以外にも、グリッドレイアウトを使用して固定幅列を作成することもできます。 グリッドレイアウトは、より複雑なレイアウトを作成する場合に適しています。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 列幅を200pxに設定し、必要に応じて伸縮 */
gap: 20px; /* 列間に隙間を追加 */
}
justify-content プロパティを使用して、Flexbox コンテナー内のアイテムの配置を制御することもできます。 例えば、列を左右に均等に配置するには、以下の CSS を使用します。
.container {
display: flex;
justify-content: space-around;
}
.column {
flex-basis: 200px;
}
メディアクエリを使用して、画面サイズに応じて列の幅を変更することができます。 例えば、小さい画面では列を 1 列に並べるには、以下の CSS を使用します。
@media (max-width: 600px) {
.container {
flex-direction: column; /* 列を縦方向に並べる */
}
.column {
flex-basis: 100%; /* 各列を100%幅にする */
}
}
上記以外にも、様々な方法で CSS Flexbox で固定幅列を設定することができます。 ご自身のニーズに合った最適な方法を選択してください。
html css flexbox
