【CSS】flexの正しい使い方

公開:2018年05月14日（最終更新:2018年05月15日）

Warning: Use of undefined constant HTTP_USER_AGENT - assumed 'HTTP_USER_AGENT' (this will throw an Error in a future version of PHP) in /home/taresuke/pub/ainc.jp/wp-content/themes/ainc/functions.php on line 98

floatの代わりになると期待されているflexbox。その効果はかなり大きいものですでに多くのサイトで導入されています。
非常に使い勝手が良い分、少しでも間違えるとまったく意図しない形になってしまいます。

どうもうまくflexを使えないよーという人の為に、flexの使い方を優しく紹介します。

flexboxとは？

Flexboxとは、要素のサイズが不明なものでも、ダイナミックに変化に柔軟に対応できるCSS3の新しいレイアウトモジュールです。レスポンシブデザインなど、これからはウィンドウサイズによってホームページの表示を正確に変化させていく必要があります。floatではどうしてもタグが長くなってしまうところをflexだったら数行で解決出来る優れものです。

ぜひ、使い方をマスターして自分のサイトでも生かしていきましょう！

基本的な考え方

flexを導入して大きくデザインが崩れてしまうのは、flexを置く場所が間違っていることが大半です。floatの場合は移動させたい要素（div等)にfloatを配置すればOKでした。しかし、flexの場合、少し勝手が変わっていきます。

flexを指定したい親枠（大枠）がブロック要素であればdisplay: flex;と指定。インライン要素であればdisplay: inline-flex;と指定します。

ブロック要素
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

ブロック要素

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、

インライン要素
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

インライン要素

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、

<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、

簡単に言えば、タグを使うと『改行』されるものがブロック要素。見出しタグなどですね。インライン要素はタグを使用しても改行されません。太文字タグやリンクタグなどがここに分類されます。

親枠に配置するオプション

flex-direction … 子要素の並ぶ向き
デフォルト値: row

/* 最初から順番に横並び */
flex-direction: row;

/* 最後から順番に横並び */
flex-direction: row-reverse;

/* 最初から順番に縦並び */
flex-direction: column;

/* 最後から順番に縦並び */
flex-direction: column-reverse;

/* 最初から順番に横並び */

flex-direction: row;

/* 最後から順番に横並び */

flex-direction: row-reverse;

/* 最初から順番に縦並び */

flex-direction: column;

/* 最後から順番に縦並び */

flex-direction: column-reverse;

flex-wrap … 子要素の折り返し
デフォルト値: nowrap

/* 折り返しなし1行で表示 */
flex-wrap: nowrap;

/* 折り返しあり複数で表示 */
flex-wrap: wrap;

/* 逆から折り返して表示 */
flex-wrap: wrap-reverse;

/* 折り返しなし1行で表示 */

flex-wrap: nowrap;

/* 折り返しあり複数で表示 */

flex-wrap: wrap;

/* 逆から折り返して表示 */

flex-wrap: wrap-reverse;

flex-flowを使えば、flex-directionとflex-wrapを同時に指定できる。
デフォルト値: row nowrap

/* 両方指定例 */
flex-flow: row wrap;

1 2	/* 両方指定例 */ flex-flow: row wrap;

子要素の配置をまとめて

justify-content … 水平方向の揃え
デフォルト値: flex-start;

/* 行の開始位置から配置。左揃え */
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;

/* 中央揃え */

justify-content: center;

/* 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置 */

justify-content: space-between;

/* 両端の子要素も含め、均等に間隔をあけて配置 */

justify-content: space-around;

align-items … 垂直方向の揃え
デフォルト値: stretch

/* 高さ一杯に表示 */
align-items: stretch;

/* 親要素の開始位置から配置。上揃え */
align-items: flex-start;

/* 親要素の終点から配置。下揃え。 */
align-items: flex-end;

/* 中央揃え。 */
align-items: center;

/* ベースラインで揃える */
align-items: baseline;

/* 高さ一杯に表示 */

align-items: stretch;

/* 親要素の開始位置から配置。上揃え */

align-items: flex-start;

/* 親要素の終点から配置。下揃え。 */

align-items: flex-end;

/* 中央揃え。 */

align-items: center;

/* ベースラインで揃える */

align-items: baseline;

align-content … 複数行にした時の揃え
デフォルト値: stretch

/* 親要素の高さに合わせて広げて配置 */
align-content: stretch;

/* 親要素の開始位置から配置。上揃え。 */
align-content: flex-start;

/* 親要素の終点から配置。下揃え。 */
align-content: flex-end;

/* 中央揃え */
align-content: center;

/* 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置 */
align-content: space-between;

/* 上下端にある子要素も含め、均等に間隔をあけて配置 */
align-content: space-around;

/* 親要素の高さに合わせて広げて配置 */

align-content: stretch;

/* 親要素の開始位置から配置。上揃え。 */

align-content: flex-start;

/* 親要素の終点から配置。下揃え。 */

align-content: flex-end;

/* 中央揃え */

align-content: center;

/* 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置 */

align-content: space-between;

/* 上下端にある子要素も含め、均等に間隔をあけて配置 */

align-content: space-around;

以上が親枠に設定できるオプションになります。

子要素に設定できるオプション

display: flex;が指定された要素の中にある要素（Flexアイテム）にだけ効果が発揮されます。親要素に display: flex; が指定されていないと動作しません。

デフォルトで問題がなければ、設定する必要はありません。

order … 番号をつけて配置順番を変更する。
flex-grow … デフォルトは１。それより大きくすると他の枠よりも大きい枠になる。
flex-shrink … 上とは反対にこちらは大きくすると縮む。デフォルトは１。
flex-basis … 子要素のベースとなる幅の指定。px,%,autoが使用可能。デフォルトはauto。
flex … flex-grow、flex-shrink、flex-basisをまとめて指定できる。

特定の子要素だけ配置を変えたい

align-self … 子要素の垂直方向の揃え
デフォルト値: auto

高さが足りない子要素の配置場所を決める。背景を出したい、文字の位置を揃えたいなどの問題を解決します。

/* 親要素の高さ、もしくは子要素の最大の高さに合わせて配置。背景がでない */
align-self: stretch;

/* 親要素の開始位置から配置。上揃え。高さが足りない子要素の下に背景が出る */
align-self: flex-start;

/* 親要素の終点から配置。下揃え。高さが足りない子要素の上に背景が出る */
align-self: flex-end;

/* 中央揃え 高さが足りない子要素の上下に背景が出る */
align-self: center;

/* ベースラインで揃える */
align-self: baseline;

/* 親要素の高さ、もしくは子要素の最大の高さに合わせて配置。背景がでない */

align-self: stretch;

/* 親要素の開始位置から配置。上揃え。高さが足りない子要素の下に背景が出る */

align-self: flex-start;

/* 親要素の終点から配置。下揃え。高さが足りない子要素の上に背景が出る */

align-self: flex-end;

/* 中央揃え高さが足りない子要素の上下に背景が出る */

align-self: center;

/* ベースラインで揃える */

align-self: baseline;

以上が子要素に配置できるオプションになります。

flexの使い方

設定をずらっと見ていくとわかるようにfloatと違って、flexは個別に指定するのではなく、親枠でflexを宣言し、子要素をどのように配置するのかを設定します。floatに慣れていると1つずつ設定が出来ないので戸惑うこともあるかもしれませんが、flexは親枠を指定して子要素の横幅を指定するだけで出来るので慣れると非常に楽に感じるはずです。

これからはflexboxが主流になっていくと思いますので、使ったことがない人はぜひお試し下さい。