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. 一見、

[lowgain]

“::after{ content:""; display: block; width:30%; }”

[taky1973]

なるほどー。レスポンシブで幅ごとにカラム数を変更する時は複雑になりそうだが頭に入れておこう

[idr_zz]

space-betweenは端数の時の最後の行だけ唯一惜しいんですよね。。。 Flexboxのjustify-contentで最後の行を左寄せにする方法 - to-R @KazumaNishihataさんから

[sometk]

便利そうなんだけど、使いたい用途で難儀する／別の方法で解決出来てる気がする

[miracle1998]

なるほど～(*￣∇￣*)

[idiotcomputer]

良いような気もするし悪手のような気もする