横並びの救世主

今まではfloatや親要素にdisplay: inline-block; text-align: center;とどうも難解な設定をしないといけなかった要素の横並びのレイアウト。

それがflexboxという概念ができてから楽勝で実装することができました。

Justify-content、align-item、flex-wrap、flex-directionと今多用しているのは親要素につけるプロパティが多く、「もしや俺はflexboxの全てを知らないんじゃないのか…？」と思い、今回はチートシートを作成して業務の効率化に取り組むことにしました！

弊社で働きたい初心者向けのブログも書いて、自分に役立つTG式flexboxチートシートも作れば一石二鳥でうまい話です。

果たしてそんなうまい話ができるのか？
チートシートなるものができるのか？

Flexboxの歴史

正確にはわからなかったのですが、2015か2016年にはすでにあったと思います。（前の職場で使っていたはずなので。もしかしたらもっと前か？）

その時は横並びでレイアウトする = floatを使用するという時代だったと思います。
その一時代前はtableレイアウトだった気がします。自分はこのころWeb制作の勉強を始めました。

今では便利なflexboxですが、出てきた当時は結果的にfloatを指定するという辛い修正を余儀なくされることもありました。

そう。IEの存在です。

今でもIE11がしぶとく残ってますが、子要素をwidth: 100%;にすればちゃんと指定通りにレイアウトされますが、昔は本当に「どう修正すれば直るの？」という崩れ方をして、仕方なく「floatで直そう。（それでも面倒なことはあるけど…）」ということがありました。

Flexboxのチートシートを作っていく

親要素に設定できるプロパティ

今回のベースのHTMLです。

<div class=“parent”>
　　　　<div class=“child”>1</div>
　　　　<div class=“child”>2</div>
　　　　<div class=“child”>3</div>
</div>

display: flex;

.parent{
  display: flex;
}

まずは基本中の基本。これを親要素（parent）に指定してください。
すると、以下のようになります。

これで横並び終わりです。簡単でしょ？

ただ、これだと不格好ですね。余白もないし、美しくない。

そこで子要素ごとに余白を開けましょう。
親要素（parent）にそれぞれ指定すると画像のようになります。

justify-content: space-between;

.parent{
  display: flex;
  justify-content: space-between;
}
.child{
  width: 28%;
}

justify-content: space-around;

.parent{
  display: flex;
  justify-content: space-around;
}
.child{
  width: 28%;
}

justify-contentは横の配置に適応されます。space（隙間）をbetween（間）に入れるか、around（周り）に入れるか指定します。

その他にstart（始め）、end（終わり）、evenly（均等）center（中央）があります。

余白が取られて見た目バッチリになりましたね。
これでスッキリ解決…ではないです。

仮に子要素の横幅の合計の値が親要素を超えた場合、display: flex;を指定するとこうなります。

<div class=“parent”>
　　　　<div class=“child”>1</div>
　　　　<div class=“child”>2</div>
　　　　<div class=“child”>3</div>
　　　　<div class=“child”>4</div>
　　　　<div class=“child”>5</div>
　　　　<div class=“child”>6</div>
</div>

.parent{
  display: flex;
}
.child{
  width: 28%;
}

PCで見ると親要素は横幅800pxあり、子要素はその30%でwidthを指定しているので240pxになるはずです。
しかし、Chromeなどの検証で見ると子要素は133px（800pxを子要素6個で割った数）になっています。

なぜかと言うと、何も指定しなければ永遠とdisplay:flex;は横に並び続けるからです。

コンテンツが決まっている場合は特に問題ないですが、ニュースやブログのようにコンテンツの増減がある場合はdisplay:flex;で設定すると永遠に横に並び、目も当てられなくなります。

そこでカラム落ちを実現するためのプロパティと値が、flex-wrap:wrap;になります。

flex-wrap:wrap;

.parent{
  display: flex;
  flex-wrap:wrap;
}
.child{
  width: 28%;
}

このように、親要素のサイズを超えたらカラム落ちをしてくれます。

今までは子要素の横幅も縦幅も同じサイズの想定での話をしてましたが、
サイズが違う、例えばテキストエリアと画像の場合はもう１つ設定した方がいいプロパティがあります。
align-itemsです。

テキストと画像のHTML

<div class="parent">
　　<div class="child"></div>
　　<div class="text">テキストが入ります。</div>
</div>

align-items: flex-start;

.parent{
  display: flex;
　　align-items: flex-start;
}
.child{
  width: 28%;
　　background-color: #000;
}

align-items: flex-end;

.parent{
  display: flex;
　　align-items: flex-end;
}
.child{
  width: 28%;
　　background-color: #000;
}

align-items: center;

.parent{
  display: flex;
　　align-items: center;
}
.child{
  width: 28%;
　　background-color: #000;
}

このように、縦幅が広い要素に合わせて上揃いにするか下揃いにするかセンターに配置するかを指定できます。

また同じHTMLで左右を入れ替えることもできます。flex-directionというプロパティがあります。

flex-direction: row;

.parent{
  display: flex;
　　align-items: center;
  flex-direction: row;
}
.child{
  width: 28%;
　　background-color: #000;
}

flex-direction: row-reverse;

.parent{
  display: flex;
　　align-items: center;
  flex-direction: row-reverse;
}
.child{
  width: 28%;
　　background-color: #000;
}

１点、row-reverseを使うとテキストと画像の順番が見た目とHTMLの構成とで変わるので、アクセシビリティに考慮するのが必要だそうです。

これまでflexboxは横並びができるやつ的に話してきましたが、実は縦に配置できるプロパティもあります。
flex-direction: column;とflex-direction: column-reverse;です。

flex-direction: column;

flex-direction: column-reverse;

子要素に設定できるプロパティ

数値を設定して小さい数値から順番に並べるorderというプロパティがあります。

order: 値;

.parent{
  display: flex;
　　align-items: center;
  flex-direction: row-reverse;
}
.child{
  width: 28%;
}
.child:nth-child(1){ //黒ボックス
  order: 2;
}
.child:nth-child(2){ //赤ボックス
  order: 1;
}
.child:nth-child(3){ //緑ボックス
  order: 0;
}

flex（flex-shrink、flex-grow、flex-basic）

このプロパティ自体はあまり使わないですが、便利な使い方があります。
固定 + 可変のレイアウトの場合です。

<div class="parent">
　　<div class="child"></div>
　　<div class="text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
</div>

.parent{
  display: flex;
　　align-items: center;
}
.child{
  width: 100px;
}
.text{
  flex: 1;
}

flex自体をそんなに使わないので、固定 + 可変を使う場合のおまじないとして覚えています。
本来はプロパティの動きを理解するべきなのですが、そんなに使わなければおまじない的に覚えてもいいでしょう。（大甘）

まとめ

以上が弊社流のflexboxのチートシートとなります。弊社ではflexboxを使う場合、これ以上でもこれ以下でもなく、ここにあがってるものだけを使用しています。もっといい指定方法を見つけたらこの記事更新しようかなと思います。

あと、flexboxの他にgridっていうのもあるのでいつかまとめたいと思います。ただ、gridってそんなに使ってないしなぁどうしようかなぁというのが本音なので、とりあえず次回はtransform系統をまとめていきます。