Flexboxのjustify-contentで最後の行を左寄せにする方法

このエントリーをはてなブックマークに追加

Flexboxのjustify-contentで最後の行を左寄せにする方法

Flexboxのjustify-contentではflexアイテムの配置方法が指定できます。

justify-contentに「center」と指定すればflexアイテムを中央寄せに、「space-between」と指定すれば両サイドを端に配置し中のflexアイテムを均等に、「space-around」と指定すればすべてのflexアイテムを均等に配置します。

以下は、justify-contentにspace-betweenを指定したサンプルです。flex-wrapにはwrapを指定してflexコンテナより溢れたflexアイテムは改行されるようにしています。

See the Pen Flexboxのjustify-content by Kazuma Nishihata (@to-r) on CodePen.

一見、問題なさそうですがflexアイテムを1つ追加すると最後の行が左右に配置されてしまい表示がおかしくなってしまいます。

See the Pen Flexboxのjustify-content by Kazuma Nishihata (@to-r) on CodePen.

justify-contentは便利なプロパティですがflexアイテムの数が可変の場合、表示の制御が一気に難しくなります。

3カラムの場合の対応策

表示したいflexアイテムが3カラムの場合は、after擬似要素を利用して空のflexアイテムを生成しておくこと、どのような数でも左寄せに表示することができます。

.container::after{
  content:"";
  display: block;
  width:30%;
}

See the Pen Flexboxのjustify-content by Kazuma Nishihata (@to-r) on CodePen.

4カラムの場合の対応策

表示したいflexアイテムが4カラムの場合は、after擬似要素だけでは足らないのでbefore擬似要素を利用しましょう。追加するだけですと冒頭に空白が空いてしまうのでorderプロパティで表示順の制御をする必要があります。

.container::before{
  content:"";
  display: block;
  width:23%;
  order:1;
}
.container::after{
  content:"";
  display: block;
  width:23%;
}

See the Pen Flexboxのjustify-content by Kazuma Nishihata (@to-r) on CodePen.

5カラム以上の場合の対応策

5カラム以上に関してはCSSのみでの対応は難しいため、あらかじめ空の要素をHTML中に仕込んでおくしかなさそうです。

See the Pen Flexboxのjustify-content by Kazuma Nishihata (@to-r) on CodePen.

スポンサードリンク

«「FOR CREATORS #1」に出演します。 | メイン | Web制作の現場で使う jQueryデザイン入門 [改訂新版] 9刷決定»

このエントリーのトラックバックURL
コメントを投稿