CSS flexがわかる！今すぐ使える頻出レイアウト5選

CSS flexの使い方やgridとの使い分けが難しいと感じる方も多いですが、まずはflexをしっかり覚えることで多くのレイアウトの悩みを解決できます。

CSS flex（flexbox）は、要素の配置や整列を直感的に操作でき、レスポンシブデザインにも対応しやすいレイアウトです。

この記事では、CSS flexの基本から頻出レイアウトのサンプルコード、よくあるトラブル解決方法まで詳しく解説します。

CSS flexの頻出レイアウト5選

CSS flex（Flexbox）でよくあるレイアウトを5つ紹介します。

1. 横並びナビゲーションバー
2. 固定幅+可変幅の2カラムレイアウト
3. 要素の順序変更
4. カード型レイアウト
5. 画像とテキストの交互レイアウト

気になるレイアウトからチェックしてみてください。

1.横並びナビゲーションバー

 ナビゲーションバーはサイトで最も一般的なレイアウトの一つです。

CSSのflexを使うと、メニュー項目を親コンテナにしてdisplay:flex;を指定するだけで横並びにできます。

コピー<nav class="nav">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">会社概要</a>
<a href="#">お問い合わせ</a>
</nav>

コピー.nav {
display: flex;
justify-content: center;
background: #608FC3;
padding: 0 1.5rem;
}

.nav a {
color: #fff;
padding: 1rem 1.2rem;
text-decoration: none;
font-weight: bold;
transition: background .3s;
}

.nav a:hover {
background: #4978A8;
}

上記のように .nav に display:flex; を指定すると、子要素であるリンクが自動的に横並びになります。

次にjustify-content: center; を当てて、子要素がコンテナ中央に揃え、左右の余白を均等にして見た目のバランスを整えます。

2.固定幅+可変幅の2カラムレイアウト

ページの2カラムレイアウトもCSSでflexを使用すると、容易に作れます。

コピー<div class="container">
<aside class="sidebar">サイドバー（固定）</aside>
<main class="content">
<h2>メインコンテンツ</h2>
<p>可変幅エリアはウィンドウの残りを自動で埋めます。</p>
</main>
</div>

コピー.container {
display: flex;
min-height: 200px;
border: 2px solid #ccc;
}

.sidebar {
width: 200px;
background: #f5f5f5;
padding: 1rem;
box-sizing: border-box;
}

.content {
flex: 1;
background: #fff;
padding: 1rem;
box-sizing: border-box;
}

containerクラスにdisplay: flex;を指定すると、sidebarクラスとcontentクラスが横並びになります。

sidebarクラスは200pxで幅を固定し、メインコンテンツが画面サイズに応じて自動的に伸び縮みします。

たとえば、画面幅が1000pxの場合はsidebarクラスは200pxでcontentクラスは800px、画面幅が1200pxの場合ならsidebarクラスは200pxでcontentクラスは1000pxです。

このように、画面幅に応じてメインコンテンツであるcontentクラスが可変します。

3.カード型レイアウト

カード型レイアウトは、アイテムが画面幅に合わせて折り返すグリッド状レイアウトです。

たとえば商品一覧や記事一覧のカードを横並びにして、余ったスペースを均等に配置するときに役立ちます。

コピー<div class="wrap-container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
<div class="item">アイテム4</div>
<div class="item">アイテム5</div>
<div class="item">アイテム6</div>
</div>

コピー.wrap-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
width: 800px;
}

.item {
flex: 1 1 200px;
background: #f0f0f0;
height: 100px;
padding: 1rem;
border-radius: 30px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}

display: flex;で子要素が横並びになります。さらにflex-wrap: wrap;を追加すると、一行に入りきらない要素が自動的に次の行に折り返されます。

gapを使うと、アイテム間の余白をまとめて指定でき、個別マージンが不要で便利です。

それぞれのitemクラスに flex: 1 1 200px; と設定すると、基本幅200pxをベースに伸縮しつつ並びます。

ブラウザ幅が狭くなると、自動で折り返すため、メディアクエリなしでもある程度レスポンシブ対応が可能です。

4.要素の順序変更

要素の順序変更は、HTMLの構造をそのままに表示順だけを入れ替えられます。

デスクトップでは「要素1→要素2→要素3」の順に、スマートフォンでは「要素2→要素3→要素1」のように切り替えたい場合に役立ちます。

コピー<div class="order-container">
<div class="item item-1">アイテム1</div>
<div class="item item-2">アイテム2</div>
<div class="item item-3">アイテム3</div>
</div>

コピー.order-container {
display: flex;
}

.order-container .item {
flex: 0 0 200px;
margin: 0 1rem;
padding: 1rem;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: .5rem;
text-align: center;
box-sizing: border-box;
}

.item-1 {
order: 3;
} /* 元の1番目を3番目に */

.item-2 {
order: 1;
} /* 元の2番目を1番目に */

.item-3 {
order: 2;
} /* 元の3番目を2番目に */

親要素にdisplay: flex;を指定して横並びにします。

flex: 0 0 200px;を使用すると、「伸びず縮まず、基準幅200px」という設定で固定幅のアイテムを一行で設定できます。

また、orderプロパティは、Flexコンテナ内の要素をHTMLの並び順とは別に「見た目上だけ」表示順を入れ替えるためのCSSプロパティです。

初期値は全ての要素で0、数値が小さい要素ほど前に、大きい要素ほど後ろに配置できます。

たとえば、ある要素にorder: -1;を設定すれば、デフォルトの0よりもさらに先頭に移動でき、大きな値を指定すれば後ろに回せます。

5.画像とテキストの交互レイアウト

画像とテキストを交互に表示するレイアウトは、flex-direction: row-reverse;と疑似クラスnth-child()を使用します。

コピー<section class="about">
<div class="about__list">
<div class="about__item">
<img
class="about__item__img"
src="/img/sample.jpg"
alt="サンプル画像"/>
<div class="about__item__text">
<h3>画像左・テキスト右</h3>
<p>コーディングしたまま表示</p>
</div>
</div>
<div class="about__item">
<img
class="about__item__img"
src="/img/sample.jpg"
alt="サンプル画像"/>
<div class="about__item__text">
<h3>画像2が左・テキストが右</h3>
<p>flex-direction: row-reverse;で順序を反転</p>
</div>
</div>
</div>
</section>

コピー.about {
margin: 0 auto;
width: 700px;
}

.about__item {
display: flex;
margin: 60px auto;
}

.about__item:nth-child(even) {
flex-direction: row-reverse;
}

.about__item__text,
.about__item__img {
width: 50%;
}

.about__item__text {
margin: auto 45px;
}

about__itemクラスにdisplay: flex;を設定して画像とテキストを横並びにしましょう。

次に、2段目のabout__itemクラスの画像とテキストを反転させます。偶数番目だけに適用されるnth-child(even) とflex-direction: row-reverse;を指定して、2段目の画像とテキストの位置を交互にします。

画像とテキストにはそれぞれwidth: 50%;を指定し、さらにテキスト部分には左右45pxのマージンを加えて画像とのスペースを確保しました。

このようにHTMLはそのままに「画像→テキスト」「テキスト→画像」が交互に並ぶレイアウトができます。

CSS flexとは

CSS flexの基礎をおさえましょう。

• display: flex;とdisplay: block;の違い
• CSS flexとCSS Gridの使い分け
• flex: 1;の仕組み

これらを知っておくことで、flexへの理解が深まります。

▶︎「駆け出しコーダー必見のFlexbox簡単基礎ガイド」はこちら

display: flex;とdisplay: block;の違い

display: flex;とdisplay: block;の違いは、flexでは縦横にレイアウトできることに対して、blockは縦方向のみの配置です。

flexは柔軟に位置調整ができますが、blockはHTMLの基本的な表示形式しかできないという点で異なっています。

それぞれの特徴を以下の表にまとめました。

実際にコーディングするときには縦に並べるならblock、横に並べるときにはflexと覚えておきましょう。

CSS flexとCSS Gridの使い分け

flexとGridはそれぞれ得意分野が異なるため、両方を組み合わせることで効率的かつ柔軟なレイアウト設計が可能です。

flexとGridの使い分けを以下の表にまとめました。

flexは「横一列に並べる」「縦一列に並べる」のが得意で、Gridは「表のようなマス目」を作るのが得意です。

flexは要素の中身に合わせてサイズが変わりますが、Gridは最初に「ここは大きく、ここは小さく」と枠を決めてから中身を入れます。

レイアウトを作るときはflexから覚えて、慣れたらGridに挑戦するのがおすすめです。

実際の開発では大枠をGridで作って、細かい部分をflexで調整するという使い方がよくあります。

flex: 1;の仕組み

flex: 1;は、フレックスアイテム（flex要素の子要素）に適用するプロパティで、利用可能なスペースを均等に分配します。

たとえば、親要素にdisplay: flex;を設定し、3つの子要素の全てにflex: 1;を指定すると、それぞれが親要素の幅を3等分して表示されます。

flex: 1;の詳細は以下の通りです。

flex: 1;は実際にはflex-grow: 1; flex-shrink: 1; flex-basis: 0%;の省略形で、「拡張比率1、縮小比率1、基本サイズ0%」を意味します。

異なる比率も指定でき、flex: 1;とflex: 2;を混在させると、1:2の比率でスペースが分配されます。

固定幅の要素と組み合わせることで、「サイドバーを200pxで固定し、メインコンテンツは残り全て」といったレイアウトも可能です。

画面サイズが変わっても自動的に調整されるため、レスポンシブデザインに適しています。

ナビゲーションメニューの均等配置、カードレイアウト、フォームの入力欄などでよく使用されます。

ただし、flex: 1;が機能するのは、親要素にdisplay: flex;が設定されている場合のみです。

CSS flexでよくあるトラブルの解決法

CSS flexでよくあるトラブルは以下の3つです。

• 中央寄せが効かない
• 想定外の余白が発生する
• ブラウザごとに表示が違う

それぞれのトラブルの解決法を丁寧に解説します。

中央寄せが効かない

flexで中央寄せが効かない場合は、親要素の設定不備が主な原因です。

display: flex;の指定忘れ、子要素のmargin: auto;設定、コンテナの高さ未設定を確認しましょう。

flexboxの中央寄せはjustify-content: center;とalign-items: center;で実装できますが、正しく動作するには特定の条件が必要です。

基本的な中央寄せの書き方は以下の通りです。

コピー.container {
display: flex;
justify-content: center; /* 水平方向の中央寄せ */
align-items: center; /* 垂直方向の中央寄せ */
}

中央寄せが効かない3つの主な原因を表にまとめました。

flexでは中央寄せが簡単にできる反面、つまずきやすいデメリットがあります。

中央寄せが効かないときは、上記の表を確認すると、ほとんどの問題が解決できるでしょう。

想定外の余白が発生する

flexを使用したときに想定外の余白が発生する場合は、gapプロパティを使用しましょう。

従来のmarginによる余白管理は複雑で、最後の要素に不要な余白が残るなどの問題が起こりやすくなります。

たとえば、<p>タグや<h1>タグは初期状態でmarginを持っています。

gapを使えば、フレックスアイテム間の余白を簡単に指定でき、余計なマージン調整が不要です。

余白はgapやflexのプロパティで制御し、個別のmargin指定は避けましょう。

gapを活用すると、想定外の余白を防げて保守性の高いCSSを書けます。

ブラウザごとに表示が違う

現在のflexはほとんどのモダンブラウザでサポートされていますが、古いブラウザや特定環境では挙動差に注意が必要です。

たとえば、Internet Explorer（IE11以前）は仕様が部分的に古くて未対応の場合があります。

古いSafariではgapが効かないこともあるため、必要に応じて余白をmarginで代替しましょう。

全体として、今はほとんどのブラウザで安定して使えますが、表示テストは必ず行ってください。

まとめ：CSS flexで柔軟にレイアウトしよう

CSS flexは、要素を直感的に整列・配置でき、レスポンシブ対応にも優れたレイアウト技術です。

ナビゲーションや2カラム構成、カード型レイアウトなど頻出の5パターンを習得すれば、多くの場面で柔軟に活用できます。

さらにGridとの使い分けやflex:1の仕組み、よくあるトラブルの解決法も理解しておくことで、安定したコーディングが可能になります。

今回紹介した5つのレイアウトパターンを参考に、CSS flexを積極的に活用してみてください。

flexをマスターして、コーディングの幅を広げていきましょう。

未経験からWebスキルを身につけるならデイトラがおすすめ！

デイトラは、本格的なWebスキルをつけて仕事につなげるオンライン講座を運営しています。

Web制作コースをはじめ、Shopifyコースやドローンコース、LINE構築コースなど、さまざまなコースがあります。

はじめての分野を学ぶときに陥りやすいのは、質問できる環境がなくて挫折してしまうことです。

デイトラではどのコースでも現場で活躍するメンターのサポートが受けられます。質問ができることはもちろん、Web制作コースやWebデザインコースライティングコースなどでは丁寧な課題添削もあります。

プロから直接指導が受けられ、独学よりも得られるものは大きく、どんどんスキルアップするでしょう。

さらに、デイトラではカリキュラムが随時アップデートされます。受講すると、無料で追加コンテンツも閲覧可能で、いつでも最新スキルを学べる環境が整っています。

未経験からWebスキルを武器に一歩を踏み出したい方は、ぜひデイトラをチェックしてみてください。