Flexbox vs float vs inline-block vs CSS Grid: 4つのアイテムを1行に並べる方法
2024-04-02
Flexboxで4つのアイテムを1行に並べる方法
HTML
まず、4つのアイテムをどのように配置したいか考えます。例えば、以下のような構造が考えられます。
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
CSS
次に、Flexboxを使って要素を配置します。以下のコードは、container要素をFlexboxコンテナにし、4つのアイテムを1行に並べるものです。
.container {
display: flex;
}
.item {
flex: 1 1 auto;
}
コードの説明：
.container要素にdisplay: flex;を設定することで、Flexboxコンテナになります。.item要素にflex: 1 1 auto;を設定することで、以下のようになります。flex: 1: 横幅を1/4に設定します。1: アイテムの最小幅を1/4に設定します。
実行結果
上記の設定を適用すると、4つのアイテムが1行に並んだレイアウトが完成します。
補足
- アイテムの間隔を調整したい場合は、
marginプロパティを使用します。 - アイテムを中央揃えしたい場合は、
justify-content: center;を設定します。
- 上記は基本的な例です。より複雑なレイアウトを作成するには、Flexboxの他のプロパティも使用できます。
- Flexboxは比較的新しい技術なので、古いブラウザではサポートされていない場合があります。
注意
- コードはサンプルです。実際のプロジェクトでは、必要に応じて調整してください。
- コードを使用する前に、ブラウザの互換性を確認してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox: 4 items per row</title>
<style>
.container {
display: flex;
}
.item {
flex: 1 1 auto;
margin: 0 10px;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
ポイント
.item要素にmargin: 0 10px;を設定することで、アイテム間の余白を調整しています。.item要素にborder: 1px solid #ccc;を設定することで、アイテムに境界線を設定しています。
応用
- アイテムのサイズや位置を調整することで、さまざまなレイアウトを作成できます。
- メディアクエリを使用することで、画面サイズに応じてレイアウトを変更できます。
Flexbox以外で4つのアイテムを1行に並べる方法
float プロパティを使用する方法です。以下のコードは、4つのアイテムを1行に並べるものです。
.item {
float: left;
width: 25%;
}
.item要素にfloat: left;を設定することで、左側に浮かせます。.item要素にwidth: 25%;を設定することで、幅を25%に設定します。
inline-block
.item {
display: inline-block;
width: 25%;
}
.item要素にdisplay: inline-block;を設定することで、インラインブロック要素になります。
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.item {
grid-column: span 1;
}
.container要素にgrid-template-columns: repeat(4, 1fr);を設定することで、4つの列を作成し、各列の幅を1frに設定します。.item要素にgrid-column: span 1;を設定することで、1つの列にまたがるように設定します。
比較
それぞれの方法にはメリットとデメリットがあります。
| 方法 | メリット | デメリット |
|---|---|---|
| Flexbox | シンプルで使いやすい | 古いブラウザではサポートされていない |
| float | 簡単な方法 | レイアウトが崩れやすい |
| inline-block | floatよりもレイアウトが崩れにくい | 古いブラウザではサポートされていない |
| CSS Grid | レイアウトが自由度が高い | 比較的新しい技術 |
html css flexbox
