Flexbox の justify-content プロパティの使い方
2024-04-02
Flexbox アイテム間の距離設定
justify-content プロパティは、Flexbox コンテナ内のアイテムの水平方向の配置を制御します。以下の値を使用して、アイテム間の距離を設定できます。
space-around: アイテム間の距離を等間隔に設定します。
例：
.container {
display: flex;
justify-content: space-around;
}
.item {
width: 100px;
height: 100px;
background-color: red;
}
このコードは、3 つのアイテムを水平方向に並べ、アイテム間の距離を等間隔に設定します。
stretch: アイテムの高さをコンテナの高さに合わせます。center: アイテムを垂直方向に中央揃えします。
.container {
display: flex;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: red;
}
margin プロパティは、アイテムの外側の余白を設定します。
.item {
margin: 10px;
}
このコードは、すべてのアイテムの外側に 10px の余白を設定します。
.item {
padding: 10px;
}
Flexbox アイテム間の距離を設定するには、justify-content、align-items、margin、padding などのプロパティを使用できます。これらのプロパティを組み合わせて、さまざまなレイアウトを作成できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox サンプル</title>
<style>
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<h1>Flexbox サンプル</h1>
<h2>水平方向の間隔</h2>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h2>垂直方向の間隔</h2>
<div class="container" style="flex-direction: column">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h2>`justify-content` プロパティ</h2>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<p>上記コードは、`justify-content: space-around` を使用して、アイテム間の距離を等間隔に設定しています。</p>
<div class="container" style="justify-content: space-between">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<p>上記コードは、`justify-content: space-between` を使用して、アイテム間の距離を最大限に広げています。</p>
<div class="container" style="justify-content: space-evenly">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<p>上記コードは、`justify-content: space-evenly` を使用して、アイテム間の距離を等間隔に設定し、両端の余白も半分にしています。</p>
<h2>`align-items` プロパティ</h2>
<div class="container" style="flex-direction: column">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<p>上記コードは、`align-items: center` を使用して、アイテムを垂直方向に中央揃えしています。</p>
<div class="container" style="flex-direction: column; align-items: flex-start">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<p>上記コードは、`align-items: flex-start` を使用して、アイテムを垂直方向に上端に配置しています。</p>
<div class="container" style="flex-direction: column; align-items: flex-end">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<p>上記コードは、`align-items: flex-end` を使用して、アイテムを垂直方向に下端に配置しています</p>
<h2>`margin` プロパティ</h2>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<p>上記コードは、`margin: 10px` を使用して、すべてのアイテムの外側に 10px の余白を設定
Flexbox アイテム間の距離設定：その他の方法
gap プロパティは、Flexbox コンテナ内のアイテム間の水平方向と垂直方向のギャップを同時に設定できます。
.container {
display: flex;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: red;
}
このコードは、すべてのアイテム間の水平方向と垂直方向のギャップを 10px に設定します。
calc() 関数を使用して、動的な距離を設定できます。
.container {
display: flex;
justify-content: space-between;
}
.item {
width: calc(50% - 10px);
height: 100px;
background-color: red;
}
メディアクエリを使用して、デバイスの画面サイズに応じて距離を設定できます。
@media (max-width: 768px) {
.container {
justify-content: space-around;
}
.item {
width: calc(100% - 20px);
}
}
このコードは、画面サイズが 768px 以下の場合、アイテム間の距離を 20px に設定します。
Flexbox アイテム間の距離を設定するには、さまざまな方法があります。これらの方法を組み合わせて、さまざまなレイアウトを作成できます。
css flexbox spacing
