【CSS】Flexboxで均等幅に並べる３つの裏技【余白を調整】

記事内に広告を含みます

パソ君

・Flexboxで均等幅に並べるには、どうやって実装するの？

こんな疑問にお答えします。

要素が均等幅に並んでいるデザインはよく見ますよね。

「display: flex;」を使った場合、どうやって均等に調整するんだろう？と思う人もいるはず。

ただ、実際はめちゃくちゃ簡単に調整可能！

ジト

すぐにできるよ！

ということで、この記事では「Flexboxで均等幅に並べる裏技」について解説していきます！

この記事でわかること

・Flexboxで均等幅に並べる裏技

【CSS】Flexboxで均等幅に並べる３つの裏技
【CSS】Flexboxで均等幅に並べる時の注意点
【CSS】Flexboxで均等幅に並べる【改行時のレスポンシブ対応】
- 実際にやってみた
  - コードの解説
【CSS】Flexboxで均等幅に並べる３つの裏技【余白を調整】：まとめ

【CSS】Flexboxで均等幅に並べる３つの裏技

Flexboxを使って子要素を均等に並べる裏技は、主に3つ。

flex: 1;を指定
width: 100%;を指定
width: calc()を指定

順に見ていきましょう。

均等幅に並べる➀：flex: 1;を指定

See the Pen 【flex: 1;】Flexboxで均等幅に並べる by jito-coder (@jito-coder) on CodePen.

<div class="flex01">
    <div class="flex01__item">子要素</div>
    <div class="flex01__item">子要素</div>
    <div class="flex01__item">子要素</div>
</div>

.flex01 {
  display: flex;
}
.flex01__item {
  flex: 1;
  padding: 40px;
  color: #fff;
  background-color: #000066;
  margin-right: 5px;
  margin-left: 5px;
}

コードの解説

こちらは「flex」プロパティを指定して、子要素の横幅を均等に並べています。

「flex」プロパティは簡単に説明すると、領域に対してどのくらい要素を伸び縮みするかを指定するCSSのこと。

「flex: 1;」と指定することで、均等に要素が伸び縮みすると覚えておくのがわかりやすいかと。

ジト

flex: 1;じゃなくて、flex: 5;でもflex: 10;でも均等になるよ

均等幅に並べる➁：width: 100%;を指定

See the Pen 【flex: 1;】Flexboxで均等幅に並べる by jito-coder (@jito-coder) on CodePen.

<div class="flex02">
    <div class="flex02__item">子要素</div>
    <div class="flex02__item">子要素</div>
    <div class="flex02__item">子要素</div>
</div>

.flex02 {
  display: flex;
}
.flex02__item {
  width: 100%;
  padding: 40px;
  color: #fff;
  background-color: #000066;
  margin-right: 5px;
  margin-left: 5px;
}

コードの解説

こちらは「width: 100%;」を指定して、子要素の横幅を均等に並べています。

つまり子要素の大きさを、親要素に対して100％にするということ。親要素一杯の横幅になるってことですね。

今回3つの子要素があり、それぞれに100%を指定している状態。親要素の横幅をゆうに超えています。

こういった親要素より大きい指定の場合、子要素の比率は均等になるような仕様になっているんですよね。

そのため「width: 100%;」を指定すれば、均等に並べることが可能。

均等幅に並べる➂：width: calc()を指定

See the Pen 【width: 100%;】Flexboxで均等幅に並べる by jito-coder (@jito-coder) on CodePen.

<div class="flex03">
    <div class="flex03__item">子要素</div>
    <div class="flex03__item">子要素</div>
    <div class="flex03__item">子要素</div>
</div>

.flex03 {
  display: flex;
}
.flex03__item {
  width: calc(100% / 3);
  padding: 40px;
  color: #fff;
  background-color: #000066;
  margin-right: 5px;
  margin-left: 5px;
}

コードの解説

こちらは「width: calc()」を指定して、子要素の横幅を均等に並べています。

「width: calc(100% / 3);」とすることで、3つの子要素の横幅を、3等分にわけているということ。

要はこの場合「width: 33.33333~~%」になってるんですよね。

「width: calc(100% / n);」のnの部分を、その時々の子要素の数に置きかえて使用すれば、簡単に均等幅に並べることができますよ！

【CSS】Flexboxで均等幅に並べる時の注意点

Flexboxで均等幅に並べる時の注意点が１つあります。

それが親要素に「flex-wrap: wrap」を指定しないこと。

これを指定しちゃうと、改行してしまいますからね。

例えばwidht: 100%を指定して均等に並べているのに、「flex-wrap: wrap」を親要素につけたとします。

子要素が横幅一杯になり、改行されてしまうのがわかりますよね。

そのため使用するプロパティによっては、「flex-wrap: wrap」を使うのは注意が必要。

【CSS】Flexboxで均等幅に並べる【改行時のレスポンシブ対応】

パソ君

改行しながら横幅均等に並べたいんだけど。。レスポンシブ対応もしたい。。どうしよう・・

という人もいるはず。

最後に改行しながらのレスポンシブ対応もできる方法を解説しますね。

実際にやってみた

See the Pen 【width: calc()（レスポンシブ対応用）】Flexboxで均等幅に並べる by jito-coder (@jito-coder) on CodePen.

<div class="flex04">
    <div class="flex04__item">子要素</div>
    <div class="flex04__item">子要素</div>
    <div class="flex04__item">子要素</div>
    <div class="flex04__item">子要素</div>
    <div class="flex04__item">子要素</div>
    <div class="flex04__item">子要素</div>
</div>

* {
  box-sizing: border-box;
}
.flex04 {
  display: flex;
  flex-wrap: wrap;
}
.flex04__item {
  width: calc((100% / 3) - 10px);
  padding: 40px;
  color: #fff;
  background-color: #000066;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}
@media screen and (max-width: 640px) {
  .flex04__item {
    width: calc((100% / 2) - 10px);
  }
}
@media screen and (max-width: 425px) {
  .flex04__item {
    width: calc(100% / 1);
  }
}