New!

CSS3: flex でマージンが設定された行のカラム数を調整する

CSS の flex レイアウトでレイアウトを組むのが当たり前になりました。 今回は flex コンテナ内のマージンが設定されたボックスの1行カラム数を、好みのレイアウトに調整する説明をしたいと思います。 目次 flex でマージンが設定された行のカラム数を調整する まとめ flex でマージンが設定された行のカラム数を調整する 今回は li に margin: 10px が設定されたリストの1行のカラム数をコントロールしたいと思います。 HTML flex(flex-basis)を 33%(100%/3 = 33.333% を切り上げ)とすることで margin が存在するボックスも 2列でレイアウトすることができます。 CSS 1行を3列にしたい場合は flex: 26%(100%/4 = 25+1% )とすることで 4列ではなく 3列になります。 まとめ 2014年の CSS Flexible Box Layout Module Level 1 最終草案から、多くの年月が経過し、デバイス環境の変化により float レイアウトが不要となりつつあります。 これからも float が必要なコーディングはなくならないと思いますが、メインのレイアウトは、コスト面において flex で行うのがメリットが多い時代になってしまったと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Recent Posts

Information

Pickup Contents