枠の横方向のアライメントを変更する方法については、こちらの記事を参照してください。
Flexbox の内部枠の縦方向の配置を変更するコードを紹介します。
Flexbox を利用して枠を段組みした場合に、枠の縦方向の配置を変更するにはalign-items プロパティを利用します。
align-items: (配置方法);
配置方法には次の値が利用できます。
| 名称 | 意味 |
|---|---|
| flex-start | 上端で揃えます |
| center | 中央で揃えます |
| flex-end | 下端で揃えます |
| stretch | 枠の高さを外側の枠の大きさまで広げます |
align-items:center;
以下のCSS、HTMLファイルを作成します。
.Container {
display: flex;
border: 1px solid #ff6a00;
align-items: center;
height: 240px;
}
.Frame1 {
flex: 1;
border: 1px solid #48b2ff;
}
.Frame2 {
flex: 1;
border: 1px solid #0094ff;
margin-left: 1rem;
}
.Frame3 {
flex: 1;
border: 1px solid #0059b9;
margin-left: 1rem;
}
.Frame4 {
flex: 1;
border: 1px solid #0040a4;
margin-left: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleAlignVertical.css" />
</head>
<body>
<div class="Container">
<div class="Frame1">
ABCDEFG<br />
あいうえお
</div>
<div class="Frame2">
ABCDEFG<br />
あいうえお<br />
αβγδ<br/>
ⅠⅡⅢⅣⅤ
</div>
<div class="Frame3">
ABCDEFG
</div>
<div class="Frame4">
ABCDEFG<br />
あいうえお<br/>
αβγδ
</div>
</div>
</body>
</html>
外側の枠に align-itemsプロパティを記述し内部の枠の整列方法を決定します。
今回ののコードでは center を指定しているため中央揃えになります。また、heightプロパティを記述し高さを設定しています。
.Container {
display: flex;
border: 1px solid #ff6a00;
align-items: center;
height: 240px;
}
内部の枠はflexプロパティを設定します。両端の枠以外はmargin-left プロパティを設定し枠間の余白を開けています。
.Frame1 {
flex: 1;
border: 1px solid #48b2ff;
}
.Frame2 {
flex: 1;
border: 1px solid #0094ff;
margin-left: 1rem;
}
上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。枠が縦方向の中央で揃えられて表示されます。
Containerクラスのalign-itemsプロパティを flex-startに設定した場合の表示結果です。
.Container {
display: flex;
border: 1px solid #ff6a00;
align-items: flex-start;
height: 240px;
}
枠が上端で揃えられて表示されます。
Containerクラスのalign-itemsプロパティを flex-endに設定した場合の表示結果です。
.Container {
display: flex;
border: 1px solid #ff6a00;
align-items: flex-end;
height: 240px;
}
枠が下端で揃えられて表示されます。
Containerクラスのalign-itemsプロパティを stretchに設定した場合の表示結果です。
.Container {
display: flex;
border: 1px solid #ff6a00;
align-items: stretch;
height: 240px;
}
枠の大きさが外部の枠の高さまで拡大されて表示されます。
Containerクラスのalign-itemsプロパティを省略した場合の表示結果です。
.Container {
display: flex;
border: 1px solid #ff6a00;
height: 240px;
}
align-items プロパティを省略した場合は、stretch を設定した場合と同じ表示になります。
flex-wrap プロパティが wrap に設定され、枠が折り返される場合の表示を確認します。
下記コードを準備します。
.Container {
display: flex;
border: 1px solid #ff0000;
flex-wrap: wrap;
height: 480px;
align-items: center;
}
.Frame {
width:180px;
border:1px solid #00a1ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ItemAlignVertical.css" />
</head>
<body>
<div class="Container">
<div class="Frame">
12345<br />
abcde<br />
</div>
<div class="Frame">
12345<br />
abcde<br />
あいうえお<br />
</div>
<div class="Frame">
12345<br />
abcde<br />
</div>
<div class="Frame">
12345<br />
abcde<br />
あいうえお<br />
</div>
<div class="Frame">
12345<br />
abcde<br />
</div>
<div class="Frame">
12345<br />
abcde<br />
</div>
<div class="Frame">
12345<br />
abcde<br />
</div>
<div class="Frame">
12345<br />
abcde<br />
</div>
<div class="Frame">
12345<br />
abcde<br />
</div>
<div class="Frame">
12345<br />
abcde<br />
あいうえお<br />
αβγδ<br/>
</div>
<div class="Frame">
12345<br />
abcde<br />
</div>
<div class="Frame">
12345<br />
abcde<br />
あいうえお<br />
</div>
</div>
</body>
</html>
align-items プロパティが center の場合は、複数行が均等に配置され、各行の枠の位置は枠の行の高さの中央に表示されます。
align-items プロパティが flex-start の場合は、複数行が均等に配置され、各行の枠の位置は枠の行の上端の位置に表示されます。
align-items プロパティが flex-end の場合は、複数行が均等に配置され、各行の枠の位置は枠の行の下端の位置に表示されます。
align-items プロパティが stretch の場合は、複数行が均等に配置され、各行の枠の大きさが行のサイズいっぱいで表示されます。
