【備忘録】Flexboxを知り、未だにfloatを使っていたことを恥じる男

どうも、河白です。

前回の記事で「:nth-child()」の擬似クラスについて解説する中で、レイアウトでよく使っているー…と書きました。

【備忘録】「:nth-child()」がどちゃくそ便利なのになぜ使わない？

どうも、河白です。皆さんは「:nth-child」というCSSの擬似クラスをご存知でしょうか？どうなんだろ。知っている人の方が多いのか、（ぼくの体感通り）少ないのか…。というのも、ぼくが働いている職場では「:nth-chi...

nihonsoukou.com

2020.01.14

…が、最近CSS3について調べていると「Flexbox」というものを見つけました。
あれ、これって確かレイアウト用のCSS3プロパティよなぁ。

いろいろ調べていると、こっちのほうが便利でした；

いや、「:nth-child()」が便利なことには変わりないんだけど、「Flexbox」は完全にレイアウト特化のプロパティで、そりゃレイアウト組むんだったら「FlexBox」の方が良いよねって話です。

てことで今回は「Flexbox」についての備忘録記事。

よろしくどうぞ。

「Flexbox」とは？

「Flexbox」とは「Flexible Box Layout Module」のことで、フレキシブル＝柔軟性に富んだレイアウトを組む用のCSS3プロパティです。

レイアウトを組む時、大体はulやdivなどのブロック要素のタグを使うことが多いと思います。

<div class="box">
	<div><p>ブロック１</p></div>
	<div><p>ブロック２</p></div>
	<div><p>ブロック３</p></div>
	<div><p>ブロック４</p></div>
</div>

<div class="bottom-box">
	<p>上にはブロックが並んでいるヨ。</p>
</div>


<style>
.box {
	background:#aaa;/* 背景色の指定 */
	width:100%;/* 幅の指定 */
}
.box div {
	color:#fff;/* 文字色の指定 */
	background:#333;/* 背景色の指定 */
	width:23%;/* 幅の指定 */
	height:100px;/* 高さの指定 */
	margin:0 2% 10px 0;/* 隙間の指定 */
}

.bottom-box {
	/* 背景色の指定 */
	background:#FC3;
}
</style>

ご覧の通り、ブロック要素は連続して入れると縦に並んでいきます。
横に並べたい時は「float」プロパティを使って横に並べます。

<div class="box">
	<div><p>ブロック１</p></div>
	<div><p>ブロック２</p></div>
	<div><p>ブロック３</p></div>
	<div><p>ブロック４</p></div>
</div>

<div class="bottom-box">
	<p>上にはブロックが並んでいるヨ。</p>
</div>


<style>
.box {
	background:#aaa;
	width:100%;
}
.box div {
	float:left;/* ←左詰めに並べる */
	
	color:#fff;
	background:#333;
	width:23%;
	height:100px;
	margin:0 2% 10px 0;
}

.bottom-box {
	background:#FC3;
}
</style>

さて、この「float」ですが実は非常に厄介な特性を持っています。
「float」で横並びにさせたこのソースを実際にブラウザで見てみると…

こうなります。

黒いブロック群のグレー背景が消えて、さらに下の黄色いブロックが重なってしまいます。

「floar」を指定すると、その要素を包括する親要素の高さへの干渉がなくなります。
したがって、グレー背景が消えた、というわけ。

なぜ「float」を指定するとそうなるのかぼくは詳しくは理解できていませんが…
よく言われるのが「浮動化される」からだそうです。

イメージ的にはこんなカンジ。

「float」指定された要素はレイヤが変わるというかなんというか…だから親要素は子要素の高さを読み取る事ができないので潰れてしまう。そしてその分、下の要素が上へズレる。

じゃあどうすればいいの～～～って話ですが、こういう時ぼくは「Clearfix」というCSSコードを使っていました。

.clearfix::after {
	content:" ";
	display:block;
	clear:both;
}

予めこのコードをスタイルに記述しておくと、ソースの親要素のタグ内に「Clearfix」をクラス指定してあげるだけで子要素の「float」が解除されます。

<div class="box clearfix"><!-- ←「Clearfix」のクラス指定 -->
	<div><p>ブロック１</p></div>
	<div><p>ブロック２</p></div>
	<div><p>ブロック３</p></div>
	<div><p>ブロック４</p></div>
</div>

<div class="bottom-box">
	<p>上にはブロックが並んでいるヨ。</p>
</div>


<style>
/* Clearfix コード */
.clearfix::after {
	content:" ";
	display:block;
	clear:both;
}

.box {
	background:#aaa;
	width:100%;
}
.box div {
	float:left;
	
	color:#fff;
	background:#333;
	width:23%;
	height:100px;
	margin:0 2% 10px 0;
}

.bottom-box {
	background:#FC3;
}
</style>

うまくできました。

ここから前回ご紹介した「:nth-child()」やら何やらを駆使してレイアウトを組んでいくのですが…。
非常に手間ですよね。コードも長くなるし。

これが「Flexbox」を使うと、1行だけでレイアウトを組むことができるんだって！

今までのぼくの苦労はなんだったんだ…。

実際に「Flexbox」を使ってみる

<div class="box">
	<div><p>ブロック１</p></div>
	<div><p>ブロック２</p></div>
	<div><p>ブロック３</p></div>
	<div><p>ブロック４</p></div>
</div>

<style>
.box {
	background:#aaa;
	width:100%;
	padding:20px;
}
.box div {
	color:#fff;
	background:#333;
	height:50px;
}
.box div:nth-child(2n) {
	background:#555;
}
</style>

例えばこのdiv群を「Flexbox」化させるには、親要素に

display:flex;

これを入れるだけ。

<div class="box">
	<div><p>ブロック１</p></div>
	<div><p>ブロック２</p></div>
	<div><p>ブロック３</p></div>
	<div><p>ブロック４</p></div>
</div>

<style>
.box {
	display:flex;/* 「Flexbox」化 */
	
	background:#aaa;
	width:100%;
	padding:20px;
}
.box div {
	color:#fff;
	background:#333;
	height:50px;
}
.box div:nth-child(2n) {
	background:#555;
}
</style>

…簡単すぎでは？

めっちゃ楽じゃん、Flexbox。
なぜ今まで使ってなかったのか不思議なくらい。

ということでさっそくプロパティを見ていきましょ。

「Flexbox」のプロパティ

「Flexbox」のプロパティは、親要素である「Flexコンテナ」用と子要素である「Flexアイテム」用の2種に分けられます。

「Flexアイテム」はレイアウトで並べるコンテンツで、そのコンテンツが並ぶエリアが「Flexコンテナ」みたいなイメージ。

「Flexコンテナ」用プロパティ

flex-direction

「flex-direction」プロパティは、flexアイテムがどの方向に向かって並ぶかを設定します。

• row：左から右へ水平に配置（初期値）。
• row-reverse：右から左へ水平に配置。
• column：上から下へ垂直に配置。
• column-reverse：下から上へ垂直に配置。

flex-wrap

「flex-wrap」プロパティは、flexアイテムを1列に並べるか、改行させて並べるかを設定します。

• nowrap：Flexアイテムを1列に縮小させながら配置する（初期値）。
• wrap：左から右へ並べ、はみ出た分は下へ改行して配置する。
• wrap-reverse：左から右へ並べ、はみ出た分は上へ改行して配置する。

justify-content

「justify-content」プロパティは、Flexアイテムの配置間隔の設定？みたいな感じ。

• flex-start：Flexアイテムを先頭に詰めて配置（初期値）。
• flex-end：Flexアイテムを後尾に詰めて配置。
• center：Flexアイテムを中央に配置。
• space-between：1つ目と1番後ろのFlexアイテムは両端、残りは等間隔に配置。
• space-around：Flexアイテムの両端に同じ間隔を開ける。
• space-evenly：Flexアイテムを等間隔に配置。
• stretch：Flexアイテムを等幅にする。

align-content

「align-content」プロパティは「justify-content」プロパティの垂直方向版です。

• stretch：Flexアイテムを等間隔に配置（初期値）。
• flex-start：Flexアイテムを先頭に詰めて配置。
• flex-end：Flexアイテムを後尾に詰めて配置。
• center：Flexアイテムを中央に配置。
• space-between：先頭と後尾のFlexアイテムは両端、残りは等間隔に配置。
• space-around：Flexアイテムの両端に同じ間隔を開ける。
• space-evenly：Flexアイテムを等間隔に配置。

align-items

「align-items」プロパティは、Flexアイテムの垂直（縦に並べる設定なら水平）での配置位置の設定です。

• stretch：FlexアイテムをFlexコンテナいっぱいに配置（初期値）。
• flex-start：Flexアイテムを先頭に詰めて配置。
• flex-end：Flexアイテムを後尾に詰めて配置。
• center：Flexアイテムを中央に配置。
• baseline：Flexアイテムをベースラインに合わせて配置（よくわからん🐯）。

flex-flow（ショートハンド）

「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。

• row nowrap：（初期値）
• （flex-directionの値）（flex-wrapの値）：任意の値を入れる。

「Flexアイテム」用プロパティ

order

「order」プロパティは、いちFlexアイテムの順番を指定します。

• 0：（初期値）
• 正負の整数・または0：昇順に配置。

例えばソース上で3番目のFlexアイテムを「oder : -1;」とし、その他を「oder : 0;」とした時、ソースを編集せずとも3番目のFlexアイテムを1番目に表示することができます。

flex-grow

「flex-grow」プロパティは、いちFlexアイテムの横幅の比率を設定できます。

• 0：（初期値）
• 正の数値：少数も可、負の値は無効。

例えば3番目のFlexアイテムのみ「flex-grow : 4;」とし、それ以外を「flex-grow : 1;」とした時、1：4で3番目のFlexアイテムの幅が他のFlexアイテムの4倍になります。

flex-shrink

Flexアイテムの幅×個数がFlexコンテナを超える時、Flexコンテナの幅に収めようとFlexアイテムの幅が縮小されます（「flex-wrap : nowrap;」とか）。
その縮小されるときにどういう比率で縮小されるか、というのが「flex-wrap」プロパティです。

• 1：（初期値）
• 0：絶対値。幅は縮小されません。
• 正の数値：少数も可、負の値は無効。

例えば3番目のFlexアイテムのみ「flex-shrink : 4;」とし、それ以外を「flex-shrink : 1;」とした時、1：4で3番めのFlexアイテムは他のFlexアイテムと比べて4倍小さくなります。

flex-basis

「flex-basis」プロパティは、いちFlexアイテムの幅を直接指定することができます。

• auto：（初期値）
• 数値：pxやem、%など単位を付けて指定します。

align-self

「align-self」プロパティは、いちFlexアイテムの垂直（縦に並べる設定なら水平）での配置位置を設定できます。
Flexコンテナ用プロパティの「align-items」プロパティより強制力があります。

• auto：（初期値）
• stretch：FlexアイテムをFlexコンテナいっぱいに配置。
• flex-start：Flexアイテムを先頭に詰めて配置。
• flex-end：Flexアイテムを後尾に詰めて配置。
• center：Flexアイテムを中央に配置。
• baseline：Flexアイテムをベースラインに合わせて配置（よくわからん２🐯）。

flex（ショートハンド）

「flex」プロパティは、「flex-grow」「flex-shrink」「flex-basis」のショートハンドです。

• initial：0 1 autoと同義です（初期値）。
• auto：1 1 autoと同義です。
• none：0 0 autoと同義です。
• （grow）（shrink）（basis）：各数値を指定。