本記事で紹介したいこと

CSSでレイアウトを組むためのFlexBoxの説明。
HTMLの要素をFlexBoxという箱でくくり、その中で要素の位置や並べ方を変更することができるイメージです。

適用元のHTMLとCSS

今回の実例で使用するソースコードです。

ここからFlexBoxを適用してレイアウトを変更していきます。適用前後の見た目が分かりやすいようにchildren要素の背景や文字色を変更しているだけという状態になります。

HTML

flexboxTest.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

flexBox.css

.children{
	background-color: green;
	color: white;
	margin: 10px;
}

画面

FlexBoxの適用

FlexBoxを適用したい親要素に対して、「display」プロパティで「flex」という値を指定します。

CSS
以下プロパティを追加

flexBox.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
以下プロパティを追加

flexBox.css

.parent{	
	display:flex;
	flex-direction: row-reverse;
}

画面

flex-direction:column

上端から要素を開始し、下に向けて並べる。
CSS
以下プロパティを追加

flexBox.css

.parent{	
	display:flex;
    flex-direction: column;
}

画面

flex-direction: column-reverse

下端から要素を開始し、上に向けて並べる。
CSS
以下プロパティを追加

flexBox.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
以下プロパティを追加

flexBox.css

.parent{	
	display:flex;
	flex-wrap: wrap;
}

画面

flex-wrap: wrap-reverse

下方向から上へ折り返す。
CSS
以下プロパティを追加

flexBox.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	すべて均等に間隔分けて配置

.parent{	
	display:flex;
	justify-content: space-around;
}

画面

垂直方向揃え

垂直方向の要素のそろえ方を設定できます。
最初に設定したソースコードではparent要素の縦幅が短くて要素適用されているかどうかが見えづらいので、一時的に親要素を縦に広げて枠線を出すようにます。

flexBox.css

.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
以下プロパティを追加

flexBox.css

.parent{	
	display:flex;
	align-items: stretch;
    height: 100px;
    border: solid;
}

画面

align-items: flex-start

上端に揃える

CSS
以下プロパティを追加

flexBox.css

.parent{	
	display:flex;
	align-items: flex-start;
    height: 100px;
    border: solid;
}

画面

align-items: flex-end

下端に揃える

CSS
以下プロパティを追加

flexBox.css

.parent{	
	display:flex;
	align-items: flex-end;
    height: 100px;
    border: solid;
}

画面

align-items: center

中央に揃える

CSS
以下プロパティを追加

flexBox.css

.parent{	
	display:flex;
	align-items: center;
    height: 100px;
    border: solid;
}

画面

align-items: baseline

子要素のテキストをベースに並びを揃えている

CSS
以下プロパティを追加

flexBox.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	上下を均等に間隔開けて配置

.parent{	
    display:flex;
    flex-wrap: wrap;
    align-content: space-around;
    height: 100px;
    border: solid;
}

画面