【コピペでOK！】flexboxで複数カラムに対応させる方法を解説【CSS】

Designed by macrovector / Freepik

この記事では、以上のような悩みを解決する知識を解説します。

3～5列、それぞれに対応するのって難しいですよね。

コピペで使える内容なので、

気軽にどうぞ！

3列の場合

See the Pen flexbox_column3 by kiki (@kikiblog) on CodePen.

最後の一列が二つのせいで両端に配置されてしまいました。

解決策は、疑似要素で最後に同じ幅の要素を作ってあげることです。

cssの追加コメントを見てください。

See the Pen flexbox_column3_success by kiki (@kikiblog) on CodePen.

コンテンツを囲む要素にafter疑似要素でコンテンツを挿入しています。

4列の場合

See the Pen flexbox_column4_failure_1 by kiki (@kikiblog) on CodePen.

一つの場合は大丈夫。

See the Pen flexbox_column4_failure_2 by kiki (@kikiblog) on CodePen.

表示されていませんが、

after疑似要素が右端に配置されています。

See the Pen flexbox_column4_failure_3 by kiki (@kikiblog) on CodePen.

3つの場合はafter疑似要素によってOK。

4つの場合も同じく大丈夫なので

2つの場合に対策が必要になります。

こちらも疑似要素で対応可能です。

See the Pen flexbox_column4_success by kiki (@kikiblog) on CodePen.

/*追加2*/
.flex__wrap::before {
  order:1;
  content: "";
  width: 20%;
}

考え方としては二つの空きを埋めることで解決します。

after疑似要素をすでに使っているので、

before疑似要素を使っています。

beforeはコンテンツの最初に表示されてしまうので、

flexboxのorder:1を指定してコンテンツの最後に配置します。

補足ですが、

orderは初期値で0が設定されているので、

他の指定されていない要素よりも最後に配置されることになります。

5列の場合

See the Pen flexbox_column5_failure by kiki (@kikiblog) on CodePen.

4列の時に二つの空きならば疑似要素で解決できましたね。

5列の場合は3つの空きを埋める必要があります。

beforeもafterも使ってしまったので、

ちょっとスマートではないですが、

空の要素をhtmlに追加してしまいましょう。

See the Pen flexbox_column5_success by kiki (@kikiblog) on CodePen.

HTML
<!-- 追加 -->
<div class="flex__item-empty"></div>

CSS
/**追加3**/
.flex__item-empty {
  display: block;
  width: 18%;
}

空の要素を追加することで、

before・after・空の要素で3つの空きが埋まりました。

こうなったら5列以上も簡単！

<div class="flex__item-empty"></div>

空の要素を一つずつ増やしていけばOKです。