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