本記事で紹介したいこと
CSSでレイアウトを組むためのFlexBoxの説明。
HTMLの要素をFlexBoxという箱でくくり、その中で要素の位置や並べ方を変更することができるイメージです。
適用元のHTMLとCSS
今回の実例で使用するソースコードです。
ここからFlexBoxを適用してレイアウトを変更していきます。適用前後の見た目が分かりやすいようにchildren要素の背景や文字色を変更しているだけという状態になります。
HTML
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- 個別CSS読み込み -->
<link rel="stylesheet" th:href="@{/css/test/flexBox.css}">
<meta charset="UTF-8">
<title>FlexBoxのテスト</title>
</head>
<body>
<div class="parent">
<div class="children">children 1</div>
<div class="children">children 2</div>
<div class="children">children 3</div>
<div class="children">children 4</div>
<div class="children">children 5</div>
<div class="children">children 6</div>
</div>
</body>
</html>
CSS
.children{
background-color: green;
color: white;
margin: 10px;
}
画面
FlexBoxの適用
FlexBoxを適用したい親要素に対して、「display」プロパティで「flex」という値を指定します。
CSS
以下プロパティを追加
.parent{
display:flex;
}
適用後に各種プロパティを指定して並び替えが可能になるのですが、「flex」を設定するだけで以下の規定プロパティが適用されるのでこの時点でレイアウトが変わります。
規定プロパティ
| プロパティ | 値 | 効果 |
|---|---|---|
| flex-direction | row | 左から右に並べる |
| flex-wrap | nowrap | 折り返し無 |
| justify-content | flex-start | 左揃え |
| align-items | stretch | 親要素の高さに合わせて広げる |
| align-content | stretch | 親要素いっぱいに広げる |
画面
プロパティが適用され、レイアウトが変わっていることが分かります
「左揃え」で「親要素のサイズに合わせて広げる」形になっています。
個別のプロパティ
並びの向きを変更
子要素の並び向きを変更できます。
プロパティ
| プロパティ | 値 | 効果 | 備考 |
|---|---|---|---|
| flex-direction | row | 左から右に並べる | 初期値 |
| flex-direction | row-reverse | 右から左 | |
| flex-direction | column | 上から下 | |
| flex-direction | column-reverse | 下から上 |
flex-direction:row
初期値で説明済みのため割愛。
flex-direction:row-reverse
右端から要素を開始し、左に向けて並べる。
CSS
以下プロパティを追加
.parent{
display:flex;
flex-direction: row-reverse;
}
画面
flex-direction:column
上端から要素を開始し、下に向けて並べる。
CSS
以下プロパティを追加
.parent{
display:flex;
flex-direction: column;
}
画面
flex-direction: column-reverse
下端から要素を開始し、上に向けて並べる。
CSS
以下プロパティを追加
.parent{
display:flex;
flex-direction: column-reverse;
}
画面
折り返し方向設定
子要素が複数行に渡る場合の折り返し方向を変更できます。
プロパティ
| プロパティ | 値 | 効果 | 備考 |
|---|---|---|---|
| flex-wrap | nowrap | 折り返し無 | 初期値 |
| flex-wrap | wrap | 上から下へ折り返し | |
| flex-wrap | wrap-reverse | 下から上へ折り返し |
flex-wrap: nowwrap
初期値で説明済みのため割愛。
この値の場合は「1行」で固定されるため、折り返しがされないことに注意。
flex-wrap: wrap
上方向から下へ折り返す。
CSS
以下プロパティを追加
.parent{
display:flex;
flex-wrap: wrap;
}
画面
flex-wrap: wrap-reverse
下方向から上へ折り返す。
CSS
以下プロパティを追加
.parent{
display:flex;
flex-wrap: wrap-reverse;
}
画面
水平方向揃え
水平方向の要素のそろえ方を設定できます。
プロパティ
| プロパティ | 値 | 効果 | 備考 |
|---|---|---|---|
| justify-content | flex-start | 左揃え | 初期値 |
| justify-content | flex-end | 右揃え | |
| justify-content | center | 中央揃え | |
| justify-content | space-between | 最初と最後を両端に配置、残りは均等に間隔分けて配置 | |
| justify-content | space-around | すべて均等に間隔分けて配置 |
justify-content: flex-start
初期値で説明済みのため割愛。
justify-content: flex-end
右端に揃える
CSS
以下プロパティを追加
.parent{
display:flex;
justify-content: flex-end;
}
画面
justify-content: center
中央に揃える
CSS
以下プロパティを追加
.parent{
display:flex;
justify-content: center;
}
画面
justify-content: space-between
最初と最後を両端に揃え、残りを中央に均等配置
CSS
以下プロパティを追加
.parent{
display:flex;
justify-content: space-between;
}
画面
ぱっと見、すべて均等に並べているように見えますが、最初と最後の要素はきちんと端に寄っています。後述の「space-around」を適用した画面と比べるとわかると思います。
justify-content: space-around
すべて均等に間隔開けて配置
CSS
以下プロパティを追加
.parent{
display:flex;
justify-content: space-around;
}
画面
垂直方向揃え
垂直方向の要素のそろえ方を設定できます。
最初に設定したソースコードではparent要素の縦幅が短くて要素適用されているかどうかが見えづらいので、一時的に親要素を縦に広げて枠線を出すようにます。
.parent{
display:flex;
height: 100px;
border: solid;
}
プロパティ
| プロパティ | 値 | 効果 | 備考 |
|---|---|---|---|
| align-items | stretch | 親要素の高さに合わせて広げる | 初期値 |
| align-items | flex-start | 上揃え | |
| align-items | flex-end | 下揃え | |
| align-items | center | 中央揃え | |
| align-items | baseline | ベースラインで揃える |
align-items: stretch
親要素の高さに合わせて広げる。
CSS
以下プロパティを追加
.parent{
display:flex;
align-items: stretch;
height: 100px;
border: solid;
}
画面
align-items: flex-start
上端に揃える
CSS
以下プロパティを追加
.parent{
display:flex;
align-items: flex-start;
height: 100px;
border: solid;
}
画面
align-items: flex-end
下端に揃える
CSS
以下プロパティを追加
.parent{
display:flex;
align-items: flex-end;
height: 100px;
border: solid;
}
画面
align-items: center
中央に揃える
CSS
以下プロパティを追加
.parent{
display:flex;
align-items: center;
height: 100px;
border: solid;
}
画面
align-items: baseline
子要素のテキストをベースに並びを揃えている
CSS
以下プロパティを追加
.parent{
display:flex;
align-items: baseline;
height: 100px;
border: solid;
}
子要素のテキストサイズを変えないと視覚的にわからないので、画面の例では「children1,3,6」のサイズを変更していますが、プロパティ適用するだけなら不要です。
画面
複数行の場合の垂直方向揃え
複数行になった場合の、要素の垂直方向そろえを設定します。
「flex-wrap: nowrap;（初期値）」だと子要素が1行に固定されるので、このプロパティは無効になってしまいます。
そのためここでは「wrap」に設定して確認します。
プロパティ
| プロパティ | 値 | 効果 | 備考 |
|---|---|---|---|
| align-content | stretch | 親要素いっぱいに広げる | 初期値 |
| align-content | flex-start | 上揃え | |
| align-content | flex-end | 下揃え | |
| align-content | center | 中央揃え | |
| align-content | space-between | 最初と最後を上下端配置残りは均等に間隔開けて配置 | |
| align-content | space-around | 上下を均等に間隔開けて配置 |
align-content: streach
初期値で説明済みのため割愛
align-content: flex-start
上端に揃える
CSS
以下プロパティを追加
.parent{
display:flex;
flex-wrap: wrap;
align-content: flex-start;
height: 100px;
border: solid;
}
画面
align-content: flex-end
下端に揃える
CSS
以下プロパティを追加
.parent{
display:flex;
flex-wrap: wrap;
align-content: flex-end;
height: 100px;
border: solid;
}
画面
align-content: center
中央に揃える
CSS
以下プロパティを追加
.parent{
display:flex;
flex-wrap: wrap;
align-content: center;
height: 100px;
border: solid;
}
画面
align-content: space-between
最初と最後を上下端に揃え、残りを中央に均等配置
CSS
以下プロパティを追加
.parent{
display:flex;
flex-wrap: wrap;
align-content: space-between;
height: 100px;
border: solid;
}
画面
align-content: space-around
上下均等に間隔開けて配置
CSS
以下プロパティを追加
.parent{
display:flex;
flex-wrap: wrap;
align-content: space-around;
height: 100px;
border: solid;
}
画面
