模写修行メディア

Flexboxで均等幅(同じサイズ)で横並び配置する方法!

  • Flexboxで子要素(flexアイテム)の大きさを均等幅(同じサイズ)にしたい

この記事ではサンプルを用いてFlexboxで子要素(flexアイテム)の大きさを均等幅(同じサイズ)にする方法を紹介します。

この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。

CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!

💡 コーディングの練習なら模写修行!

無料教材もあります!

【学べること】

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい
公式サイトを見る
コーディング教材の【模写修行】は他の教材と何が違うのか?

この記事の目次

均等幅(同じサイズ)で配置するには flex: 1;を使うだけ!

均等幅の図

図のようにflexアイテムを均等に配置する方法となぜ均等になるのかを解説します。

<div class ="flex-container">
    <div class ="flex-item">1</div>
    <div class ="flex-item">2</div>
    <div class ="flex-item">3</div>
</div>
.flex-container {
    display: flex;
    ...
}

.flex-item {
    flex: 1; /* これが重要! */
    ...
}

このようにflexアイテムに対して、flex: 1;を指定するだけで、flexアイテムの個数に限らず均等幅(同じサイズ)になります。

たったこれだけなのでコピペして使えますが、なぜこうなるかも理解してみてください。次のセクションでなぜ均等幅になるか解説します。

なぜflex: 1;で均等幅(同じサイズ)で配置されるのか

flexプロパティは、flex-grow / flex-shrink / flex-basisの3つをまとめて指定出来るプロパティです。

flexプロパティの初期値は0 1 autoですが、数値だけを指定すると、n 1 0になります。(nが指定した数値)

/* flex: 1;と同じ */
.flex-item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

つまり、flex: 1;は上の指定をしていることになります。

ポイントはflex-basis: 0;です。flexアイテムは全て幅が0だと想定されて、余ったスペースが分配されます。『flex アイテムは全て幅が0 = 余ったスペースはflexコンテナの幅そのもの』になります。

余ったスペース(= flex コンテナの幅そのもの)を均等にflexアイテムに分配していることになるので、flexアイテムは均等幅になります。

flexアイテムの幅が0想定なのでflexアイテムがflexコンテナに収まりきらないことはあり得ません。従ってflex-shrinkの値はなんの影響も与えません。

また、flex-growは全てのflexアイテムに共通で指定すれば数値はなんでも良いので、flex: 5;でもflex: 100;でも均等幅になります。

自由な比率で幅を決めるのも簡単!

flex: 1;で均等幅(同じサイズ)で配置され理由が理解できれば、2:1 や 4:3 など、自由な比率でflexアイテムの幅を決めることも簡単です。

2:1の幅の図

上の図は2:1の比率の幅になっています。

.flex-item:nth-child(1) {
    flex: 2;
}

.flex-item:nth-child(2) {
    flex: 1;
}

どちらもflex-basis: 0;なので、flexアイテムは幅が0だと想定されて、余ったスペースを2:1で分配しています。

URLなど長い英語の文字列が入る場合は注意!

.flex-item {
    ...
    word-wrap: break-word;
    min-width: 0;
}

URLなど長い英語の文字列が入る場合、上の2行をプラスしましょう。この2行がないと英語の文字列が折り返さずにおかしなことになります。

制作時に英語の文字列が入らなくても、その後文章差し替え等で入る可能性も考慮して、必ず入れておいても良いと思います。

他にも関連の記事を上げています!

CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!

レイアウトを作るにはFlexboxの理解が必須です。基礎を学びたい方は上の記事をご覧ください。

【CSS Grid入門】図解も交えて使い方を詳しく解説!

Flexboxでもレイアウトは作れますが、デザインによってはCSS Gridの方が適している場合もあります。CSS Gridの使い方は上の記事をご覧ください。


この記事のように、知っておくと良い、Flexbox関連のお悩み解決系の記事も多数あげています。

Flexboxで最後の1つだけ右寄せや下寄せにする方法!Flexboxとネガティブマージンでカード型レイアウトを実装する方法!Flexboxで画像や要素が小さくなる(潰れる)時の対処方法!Flexboxで画像が縦に伸びる(比率がおかしい)時の対処方法!

超実務向け!コーディングの練習が出来るサービス作りました 🎉

模写修行

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ!

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 何を考えながらコードを書くのか知りたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか?

無料教材もあります!👍

模写修行を見る

脱初心者!自信を持ってプロと言えるスキルを!

嬉しい声もいただいています!

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました!
TwitterでDMいただきました!🙇

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです!解説記事もわかりやすい...!
Tweet

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

無料教材もあります!👍

模写修行を見る

脱初心者!自信を持ってプロと言えるスキルを!

オススメweb制作の学習サイト17選!

👉詳しく見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。フリーランス歴7年くらい / 今は法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材