ブログ投稿日時：
ブログ更新日時：
align-itemsについて解説
1.
align-items とは
align-items は親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定するプロパティです。
2.
align-items の指定方法
それでは align-items の指定方法を見ていきましょう。
align-items で使える値は下記の5つです。
stretch（初期値）… 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
flex-start … 親要素の開始位置から配置。上揃え。
flex-end … 親要素の終了位置から配置。下揃え。
center … 中央揃え
baseline … ベースラインで揃える
それではそれぞれの指定方法と表示を見ていきましょう。
align-items: stretch; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>.items {
display: flex;
align-items: stretch;
gap: 16px;
height: 200px;
}
.item {
width: calc((100% - 16px * 4) / 5);
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
5
上記のように align-items: stretch; を指定すると親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置します。
align-items: flex-start; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>.items {
display: flex;
align-items: flex-start;
gap: 16px;
height: 200px;
}
.item {
width: calc((100% - 16px * 4) / 5);
height: 50px;
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
5
上記のように align-items: flex-start; を指定すると親要素の開始位置に合わせて上揃えに配置します。
align-items: flex-end; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>.items {
display: flex;
align-items: flex-end;
gap: 16px;
height: 200px;
}
.item {
width: calc((100% - 16px * 4) / 5);
height: 50px;
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
5
上記のように align-items: flex-end; を指定すると親要素の終了位置に合わせて下揃えに配置します。
align-items: center; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>.items {
display: flex;
align-items: center;
gap: 16px;
height: 200px;
}
.item {
width: calc((100% - 16px * 4) / 5);
height: 50px;
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
5
上記のように align-items: center; を指定すると中央揃えに配置します。
align-items: baseline; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>.items {
display: flex;
align-items: baseline;
gap: 16px;
}
.item {
width: calc((100% - 16px * 4) / 5);
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
5
上記のように align-items: baseline; を指定するとベースライン(それぞれの文字の最下部を基準)で揃えて配置します。
3.
今回のまとめ
この記事では align-items について解説しました。
align-items は親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定するプロパティです。
もし忘れそうな方はこの記事をブクマしていただけると嬉しいです。
最後までお読みいただきありがとうございます。