ワンランク上のWebデザインへ！ Flexboxで実現する高度なレイアウト： align-content と align-items の応用例
CSS Flexboxにおける align-content と align-items の違い
align-content
align-content は、Flexコンテナ内の複数行の配置を制御します。つまり、Flexコンテナが縦方向に複数の行に分割された場合、各行をどのように配置するかを指定します。
主な値と効果:
flex-start: 行をコンテナの上部に配置します。space-between: 行を均等に配置し、コンテナの上下端に余白を生成します。
例:
.container {
display: flex;
flex-direction: column;
align-content: space-around;
}
.item {
height: 100px;
background-color: red;
}
上記のコードでは、Flexコンテナが縦方向に2つの行に分割されます。align-content: space-around により、各行が均等に配置され、各行の間に余白が生成されます。
align-items
align-items は、Flexコンテナ内の各アイテムの垂直方向の配置を制御します。つまり、各行内のアイテムをどのように配置するかを指定します。
baseline: アイテムをベースラインに揃えます。stretch: アイテムをFlexコンテナの高さに伸縮させます。
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
height: 100px;
background-color: red;
}
上記のコードでは、Flexコンテナ内の各アイテムが垂直方向に中央に配置されます。
align-content: Flexコンテナ内の複数行の配置を制御する。
両方のプロパティを組み合わせることで、より複雑なレイアウトを実現することができます。
縦方向に並んだアイテムを中央に配置する
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
height: 100px;
background-color: red;
}
複数行に分割されたアイテムを均等に配置する
<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 class="item">Item 5</div>
</div>
.container {
display: flex;
flex-direction: column;
align-content: space-around;
}
.item {
height: 100px;
background-color: red;
}
このコードでは、5つのアイテムが2行に分割され、各行が均等に配置されます。
アイテムをベースラインに揃える
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
flex-direction: column;
align-items: baseline;
}
.item {
height: auto;
background-color: red;
}
このコードでは、3つのアイテムのベースラインが揃えられます。
アイテムを伸縮させる
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
flex-direction: column;
align-items: stretch;
}
.item {
background-color: red;
}
このコードでは、3つのアイテムがFlexコンテナの高さに合わせて伸縮されます。
上記のサンプルコードはほんの一例です。align-contentとalign-itemsを組み合わせることで、様々なレイアウトを実現することができます。
CSS Flexboxでアイテムを配置するその他の方法
.container {
display: flex;
justify-content: space-around;
}
.item {
width: 100px;
background-color: red;
}
margin と padding は、アイテムの外側と内側の余白を制御します。
.container {
display: flex;
}
.item {
margin: 10px;
padding: 20px;
background-color: red;
}
上記のコードでは、各アイテムの外側に 10px の余白、内側に 20px の余白が設定されます。
order は、Flexコンテナ内のアイテムの順序を制御します。
.container {
display: flex;
}
.item-1 {
order: 2;
}
.item-2 {
order: 1;
}
.item {
background-color: red;
}
上記のコードでは、item-1 が item-2 の前に配置されます。
align-content と align-items は、Flexbox でアイテムを配置する最も一般的な方法ですが、他にも justify-content、margin、padding、order などの方法があります。
css layout flexbox
