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

CSS の flex レイアウトでレイアウトを組むのが当たり前になりました。
今回は flex コンテナ内のマージンが設定されたボックスの1行カラム数を、好みのレイアウトに調整する説明をしたいと思います。

目次

  • flex でマージンが設定された行のカラム数を調整する
  • まとめ

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

今回は limargin: 10px が設定されたリストの1行のカラム数をコントロールしたいと思います。

HTML

<ul class="flex-container">
  <li>content</li>
  <li>content</li>
  <li>content</li>
  <li>content</li>
  <li>content</li>
  <li>content</li>
</ul>

flex(flex-basis)を 33%(100%/3 = 33.333% を切り上げ)とすることで margin が存在するボックスも 2列でレイアウトすることができます。

CSS

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;
}

1行を3列にしたい場合は flex: 26%(100%/4 = 25+1% )とすることで 4列ではなく 3列になります。

まとめ

2014年の CSS Flexible Box Layout Module Level 1 最終草案から、多くの年月が経過し、デバイス環境の変化により float レイアウトが不要となりつつあります。

これからも float が必要なコーディングはなくならないと思いますが、メインのレイアウトは、コスト面において flex で行うのがメリットが多い時代になってしまったと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents