はじめに

【css】で要素を均等配置する時、皆さんどのようにされてますか？よく記事として見かけるのが【display:flex】で【flex-direction:space-between】を使って要素同士の余白は自動計算させる方法。でもこれってレイアウト崩れを起こしやすいし、タブレットも含めたレスポンシブ対応する時デザインの質が大きく下がりますよね…。数が奇数だと真ん中が空白になって、無駄な空要素を作ったりして。デザインやコード、SEOとしての美しさも考えるとイマイチですよね。

という訳で今回は…空要素不要で、flexとcalcを使用して美しい均等配置のデザインを簡単に作る方法をご紹介します。これやってる人少ないから、ぜひ使って効率よく美しいWebデザインを行って欲しいです。

均等配置の方法

要点としては下記の通りです。

• ・親要素をflexにする
• ・子要素と余白を含む合計が親要素の幅を超えたら折り返す
• ・親要素にgapで子要素同士の余白を設定する
• ・子要素に余白を含むcalcを設定する
• ・最後の子要素にmargin-right:autoで空要素を不要に

htmlとCSS

以下に示すのは、ul要素の中のli要素を均等配置するための簡潔なHTMLとCSSの例です。

HTMLの構造

<ul>
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
<li>要素4</li>
</ul>

CSSのスタイリング

親要素に【flex】と【flex-wrap:wrap】と子要素の余白になる【gap】を設定。子要素にwidth:calc(コンテンツ幅% – 親要素と同じgap数値 * 隙間数 / コンテンツ数)となるように幅を設定します（今回は子要素を3カラムで横並びにしたいので33.33333%を設定）。

ul {
width: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
gap: 20px;
}

ul li {
width: calc(33.33333% - 20px * 2 / 3);
}

まとめ

いかがだったでしょうか？今回ご紹介した方法を活用することによりCSSもとってもシンプルになります。また、レスポンシブ対応も子要素のサイズを変更するだけなので、とっても楽ですよね？あまり知られていない方法なので、使用して様々なシーンに役立てくださいね。それでは皆さま、素敵なWebデザインライフを！