CSSのFlexboxとは？詳しい使い方と実践で使えるサンプル集を解説

かすが

みなさん、レイアウトが超簡単になるCSSのFlexbox使っていますか？

この記事では、HTMLとCSSの基礎を一通り学んだ方に向けて、CSS Flexboxの基本的な考え方から、プロパティの使い分け、よく使われる実践的なパターンまでを、初心者にも分かりやすく丁寧に解説しています。

悩む人

レスポンシブに対応したいけど、複雑なレイアウトが崩れてしまう…

悩む人

Flexboxってよく聞くけど、何から学べばいいのか分からない…

もしあなたがこんな悩みを抱えているなら、この記事はまさにあなたのための入門書です。

「今すぐにFlexboxを使いこなせるようになりたい」「自分のコードをもっとスッキリ、効率的に書けるようになりたい」という方は、ぜひこのまま読み進めてみてください。

あなたのWeb制作スキルが、ここから一歩レベルアップします。

Flexboxとは？

Flexbox（フレックスボックス）は、CSS3で導入されたレイアウト機能で、HTML要素を効率よく横や縦に並べるための仕組みです。

これまで主流だったfloatやinline-blockなどを使った方法に比べて、コードがシンプルになり、要素同士の配置調整が格段にしやすくなります。

Flexboxの一番の特徴は、親要素（コンテナ）と子要素（アイテム）に分けて、それぞれに柔軟なレイアウト指定ができるという点です。

これにより、画面の幅に応じて要素が

• 自動で縮んだり
• 間隔を空けたり
• 中央に配置されたり

といったレスポンシブな設計が容易になります。

例えば、ボタンを横一列に並べたり、複数のカードを高さを揃えて配置したりするようなケースに最適です。

HTMLとCSSの基本を理解したあとにステップアップとして学ぶ機能としても、Flexboxは非常に重要です。Web制作の現場でも頻繁に使われます。

かすが

この機会にしっかりと仕組みを理解しておきましょう！

Flexboxとgridの違い

Flexboxとよく比較されるのが、CSS Gridです。両者はどちらも要素の配置を効率化するためのレイアウトモジュールですが、適しているシーンに違いがあります。

Flexboxは1次元レイアウトを得意とします。たとえば、横並びのナビゲーションメニューや、Zに折り返して整列するカード型ボックスなど、単一方向に整列させます。

一方、CSS Gridは2次元（行と列の両方）のレイアウトに適しています。たとえば、画像ギャラリーや複雑なカード型のレイアウトなど、縦横にまたがる要素配置が必要な場合に向いています。

つまり、

と、使い分けるのがポイントです。

対応ブラウザ

Flexboxはすでに主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）で完全対応しています。

古いブラウザ、たとえばIE10やIE11でもある程度対応していますが、一部プロパティが非対応だったり、挙動が異なるケースがあります。

ただし、現在のWeb制作においては、IEのサポート終了もあり、Flexboxを安心して使える環境が整っています。

特にスマホ対応が求められるレスポンシブデザインにおいて、Flexboxの採用は必須に近いスキルと言えるでしょう。

Flexboxのおすすめポイント3つ

Flexboxが多くのWeb制作者に支持される理由は、単に要素を並べるだけでなく、配置・整列・余白の調整が驚くほど簡単にできる点にあります。

従来のCSS手法では複雑なコードやテクニックが必要だった場面も、Flexboxを使えば直感的に、しかもコード量を抑えて実装可能になります。

ここでは、Flexboxの便利さを実感できる代表的なポイントを3つ紹介します。

ポイント①：ボックスの高さが自動的にそろう

Flexboxの大きな魅力のひとつが、高さの異なる要素を自動で揃えてくれるという機能です。

たとえば、画像とテキストを含む複数のカード型ボックスを横並びにしたとき、内容量が違うと高さがバラバラになって見た目が崩れてしまいます。

しかし、Flexboxでは親要素にdisplay: flex;を指定するだけで、子要素の高さが自動で揃い、美しく整列されます。

これは特に、商品一覧やブログカードなど、同じ形のコンポーネントが並ぶデザインで非常に重宝される機能です。

ポイント②：並び順の指定もできる

Flexboxを使うと、HTMLの並び順とは別に、表示される順番を柔軟に変更することができます。これにはorderというプロパティを使用します。

たとえば、PC表示ではテキストを先に、モバイル表示では画像を先に表示したいといった場合でも、HTMLは変えずにCSSだけで制御可能です。

これにより、レスポンシブ対応の設計がしやすくなり、保守性の高いコードが書けるようになります。レイアウトの自由度が増すことで、より洗練されたUIデザインにも対応できます。

ポイント③：ボックス間の余白設定も簡単

従来のCSSでは、要素間の余白調整にmarginを個別に指定する必要があり、整列が崩れやすいという課題がありました。

しかしFlexboxでは、justify-contentやgapプロパティを使うことで、全体の配置バランスと余白を一括で調整できます。

Flexboxではこのような細かなレイアウト制御が容易にできるため、コーディング効率もアップし、見た目にも整ったデザインを短時間で実現できます。

Flexboxの基本的な使い方

Flexboxは、親要素（コンテナ）にdisplay: flex;を指定することから始まります。

この1行をCSSに追加するだけで、その中にあるすべての子要素（アイテム）が「フレックスアイテム」として扱われ、横並び・中央寄せ・間隔調整などが柔軟に行えるようになります。

ここでは、Flexboxのレイアウトを構築するために必要な基本的な記述方法と流れについて、初心者にもわかりやすく解説していきます。

1. Flexコンテナ（親要素）にdisplay: flex;を指定

以下のリストを横に並べてみます。

Flexboxの動作を適用したい親要素に、以下のようにdisplay: flex;を設定します。

See the Pen 「Flexbox」親要素にdisplay: flex;を指定 by kasuga (@kntkfmgf-the-vuer) on CodePen.

たったこの1行で子要素は横方向に自動的に整列します。

かすが

マジで簡単です！

Flexboxは使い方の基本を理解すれば驚くほどシンプルです。このあと解説する各プロパティを組み合わせることで、より自由度の高いレイアウト設計が可能になります。

Flexコンテナ（親要素）で指定できるプロパティ

Flexboxを使いこなす上で重要なのが、親要素（コンテナ）側で指定するプロパティの理解です。

これらのプロパティは、子要素の並び方や折り返し、配置の方向や間隔など、全体のレイアウト構造に大きく影響を与えます。

ここでは、フレックスコンテナに設定できる代表的なプロパティとその役割について、具体的な使用例とともにわかりやすく解説していきます。

かすが

これを押さえるだけで、Flexboxの設計力が一段階アップしますよ。

flex-direction：flexアイテムの並び順

flex-directionプロパティは、子要素（Flexアイテム）をどの方向に並べるかを指定するために使用します。

Flexboxではデフォルトで横方向（左から右）に並びますが、このプロパティを使うことで縦方向や逆順にも柔軟に対応できます。

flex-directionで指定できる値

row（初期値）

See the Pen 「Flexbox」親要素にdisplay: flex;を指定 by kasuga (@kntkfmgf-the-vuer) on CodePen.

row-reverse

See the Pen 「Flexbox」flex-direction:row-reverse by kasuga (@kntkfmgf-the-vuer) on CodePen.

column

See the Pen 「Flexbox」flex-direction:column by kasuga (@kntkfmgf-the-vuer) on CodePen.

column-reverse

flex-wrap：flexアイテムの折り返し

デフォルトのFlexboxでは、子要素が親要素の横幅を超えても折り返されずに1行に詰め込まれるという仕様になっています。

しかし、表示するアイテムが多い場合や、画面サイズが小さいデバイスでは、これではレイアウトが崩れてしまうこともあります。

そんなときに使えるのが flex-wrap プロパティです。これを使えば、要素を自動的に折り返して複数行に整列させることができます。

flex-wrapで指定できる値

nowrap（初期値）

See the Pen 「Flexbox」flex-wrap:nowrap（初期値） by kasuga (@kntkfmgf-the-vuer) on CodePen.

wrap

See the Pen 「Flexbox」flex-wrap:wrap by kasuga (@kntkfmgf-the-vuer) on CodePen.

wrap-reverse

flex-flow：flex-directionとflex-wrapをまとめて指定

flex-flow は、これまでに紹介した flex-direction（並びの方向）と flex-wrap（折り返し）をひとつのプロパティにまとめて記述できるショートハンドです。

コードを簡潔に保ちながら、Flexboxの基本的な流れと折り返しを同時に設定したいときに便利です。

See the Pen 「Flexbox」flex-flow by kasuga (@kntkfmgf-the-vuer) on CodePen.

justify-content：水平方向の位置

justify-content プロパティは、Flexboxレイアウトにおいて子要素（フレックスアイテム）を水平方向にどのように配置するかを指定するために使います。

特に、要素の中央寄せや両端揃え、均等配置など、直感的で美しい整列を行いたいときに非常に便利です。

このプロパティを使うことで、横一列に並んだ要素の間隔を一括で調整でき、従来のように1つずつmarginを設定する手間が大きく省けます。

justify-contentで指定できる値

flex-start（初期値）

See the Pen 「Flexbox」justify-content:flex-start（初期値） by kasuga (@kntkfmgf-the-vuer) on CodePen.

center

See the Pen 「Flexbox」justify-content:center by kasuga (@kntkfmgf-the-vuer) on CodePen.

flex-end

See the Pen 「Flexbox」justify-content:flex-end by kasuga (@kntkfmgf-the-vuer) on CodePen.

space-between

See the Pen 「Flexbox」justify-content:space-between by kasuga (@kntkfmgf-the-vuer) on CodePen.

space-around

See the Pen 「Flexbox」justify-content:space-around by kasuga (@kntkfmgf-the-vuer) on CodePen.

かすが

「space-between」と似ていますが、こちらはアイテムの両端にも余白がありますね。

space-evenly

See the Pen 「Flexbox」justify-content:space-evenly by kasuga (@kntkfmgf-the-vuer) on CodePen.

かすが

「space-around」と似ていますが、こちらはアイテムの両端の余白も含めて全て均等になってますね。

align-items：垂直方向の位置

align-items プロパティは、フレックスアイテム（子要素）を親要素内で垂直方向にどう揃えるかを指定するものです。

Flexboxを使うと横並びが簡単にできますが、その際に縦の位置がバラバラになってしまうことがあります。そんな時、このプロパティを使うことで、縦方向の整列を一括でコントロールできます。

特に、アイコンとテキスト、画像とボタンなど高さが異なる要素をきれいに揃えたいときに効果を発揮します。

align-itemsで指定できる値

stretch（初期値）

See the Pen 「Flexbox」align-items:strech（初期値） by kasuga (@kntkfmgf-the-vuer) on CodePen.

flex-start

See the Pen 「Flexbox」align-items:flex-start by kasuga (@kntkfmgf-the-vuer) on CodePen.

center

See the Pen 「Flexbox」align-items:center by kasuga (@kntkfmgf-the-vuer) on CodePen.

flex-end

align-content：複数行の位置

align-content は、フレックスアイテムが複数行に折り返されたときに、その行全体を垂直方向にどう配置するかを指定するプロパティです。

align-items と混同されがちですが、両者の違いは次のとおりです。

• align-items → 各アイテムの垂直方向の揃え方
• align-content → 行と行の揃え方（複数行がある場合にのみ有効）

つまり、align-content は「行グループ」を整列するプロパティであり、子要素が折り返されて2行以上になったときにのみ意味を持つという点がポイントです。

align-contentで指定できる値

stretch（初期値）

See the Pen 「Flexbox」align-content:strech（初期値） by kasuga (@kntkfmgf-the-vuer) on CodePen.

flex-start

See the Pen 「Flexbox」align-content:flex-start by kasuga (@kntkfmgf-the-vuer) on CodePen.

flex-end

See the Pen 「Flexbox」align-content:flex-end by kasuga (@kntkfmgf-the-vuer) on CodePen.

center

See the Pen 「Flexbox」align-content:center by kasuga (@kntkfmgf-the-vuer) on CodePen.

space-between

See the Pen 「Flexbox」align-content:space-between by kasuga (@kntkfmgf-the-vuer) on CodePen.

space-around

Flexアイテム（子要素）で指定できるプロパティ

ここまでで、親要素（Flexコンテナ）に指定できるプロパティについて学んできましたが、Flexboxの真価を発揮するためには、子要素（Flexアイテム）に対しての調整も欠かせません。

Flexアイテムには、

• 順番の変更
• 伸び縮みの制御
• 幅の初期値の設定
• 個別の位置揃え

などを行える専用のプロパティがあります。

これらを使いこなすことで、ただ横並びにするだけではなく、より高度で柔軟なレイアウトが実現できます。

ここでは、実務でも頻繁に使用される代表的なプロパティを一つひとつ解説していきます。どれも覚えておくと便利なものばかりですので、ぜひチェックしてみてください。

order：並び順

order プロパティは、Flexアイテムの表示順を変更するためのプロパティです。

通常、HTMLに記述された順番通りに要素は表示されますが、order を使うことで、HTMLの構造を変えずに見た目の並び順だけを調整することができます。

特に、モバイルとPCでレイアウトの順番を変えたい場合や、視覚的な優先度を動的に切り替えたいケースで役立ちます。

初期値はすべてのアイテムに対して 0 です。同じ数値を指定した場合はHTMLの記述した順に並びます。

See the Pen 「Flexbox」order by kasuga (@kntkfmgf-the-vuer) on CodePen.

flex-grow：伸び率

flex-grow は、Flexアイテムが余ったスペースをどれだけ伸びて埋めるかを指定するプロパティです。初期値は「0」です。指定した値が大きいほど、そのアイテムの幅は広くなります。

複数のアイテムが並んでいるとき、それぞれがどの程度の比率で横幅を広げるかを柔軟にコントロールできます。

これにより、たとえば「1つのアイテムだけ大きく表示したい」「残りのスペースを均等に配分したい」といったレイアウトが、とてもシンプルなCSSで実現できます。

1つ目のアイテムにのみ指定

See the Pen 「Flexbox」flex-grow(1つ目のアイテムにのみ指定) by kasuga (@kntkfmgf-the-vuer) on CodePen.

3つのアイテムに指定

flex-shrink：縮み率

flex-shrink は、Flexアイテムが親要素の幅に収まりきらないときに、どの程度縮小されるかを指定するプロパティです。初期値は「1」です。

flex-growとは対照的に指定した値が大きいほど、そのアイテムの幅は狭くなります。

画面サイズが小さくなったときや、他の要素とスペースを奪い合う状況で、要素ごとの縮みやすさを制御することができます。

親要素に「flex-wrap:wrap」が指定されていると折り返してしまうので「flex-wrap:nowap」の場合に有効です。

2つ目のアイテムに指定

See the Pen 「Flexbox」flex-shrink(2つ目のアイテムに指定) by kasuga (@kntkfmgf-the-vuer) on CodePen.

かすが

2つ目のアイテムが他より縮みましたね！

flex-basis：ベースの幅

flex-basis は、Flexアイテムの基本サイズを指定するプロパティです。これは、レイアウト計算において「最初にどれくらいの幅を取るか」という基準になります。初期値は「flex-basis:auto」です。

width や height に似ていますが、Flexbox特有のプロパティで、より柔軟にサイズ調整が可能です。

あくまで基本サイズであって、基本サイズをもとに自動で幅が計算されます。

flex-basis と width の違い

flex-basis は、Flexboxの計算における「起点」となるサイズです。通常のCSSで使う width よりも優先されます。

つまり、同じ要素に両方指定されている場合、Flexboxが適用されている限り flex-basis の値が優先されます。

.container_item {
  width: 100px;
  flex-basis: 200px; /* ← こちらが優先される */
}

3つそれぞれに値を指定

See the Pen 「Flexbox」flex-shrink(2つ目のアイテムに指定) by kasuga (@kntkfmgf-the-vuer) on CodePen.

Flexアイテムに左から順に300px、200px、400pxを指定していて、合計の幅がFlexコンテナの幅を超えるのでベースの幅を元に自動で計算されています。

flex：flexアイテムの幅をまとめて指定（grow shrink basis）

flex プロパティは、これまで紹介してきた flex-grow（伸び率）、flex-shrink（縮み率）、flex-basis（ベースの幅）の3つをひとつにまとめて簡潔に記述できるショートハンドです。

.container_item {
  flex: 1 1 200px;/*flex-grow:1 flex-shrink:1 flex-basis:200px*/
}

align-self：垂直方向の位置

align-self は、Flexアイテムごとに垂直方向の揃え方を個別に指定できるプロパティです。

これまでに紹介した align-items はコンテナ全体に対して子要素の縦方向の整列方法を一括で設定するものでしたが、align-self を使うと、一部のアイテムだけ特別な位置に揃えることが可能になります。

align-selfで指定できる値

auto（初期値）

See the Pen 「Flexbox」align-self:auto（初期値） by kasuga (@kntkfmgf-the-vuer) on CodePen.

flex-start

See the Pen 「Flexbox」align-self:auto（初期値） by kasuga (@kntkfmgf-the-vuer) on CodePen.

center

See the Pen 「Flexbox」align-self:flex-start by kasuga (@kntkfmgf-the-vuer) on CodePen.

flex-end

See the Pen 「Flexbox」align-self:center by kasuga (@kntkfmgf-the-vuer) on CodePen.

stretch

実際の制作現場で使えるFlexboxサンプル集

Flexboxの基本的な使い方やプロパティを理解したら、次は「実際の制作現場でどう使われているのか」気になりませんか？

Flexboxはその柔軟性と直感的な操作性から、日常的なWebパーツのレイアウトに頻繁に活用されています。

かすが

実際に私も実務ではFlexbox使いまくってます！

そこで、実務で特によく登場するUIコンポーネントを例に、Flexboxを使った具体的なレイアウト方法を紹介していきます。

初心者の方は実装のイメージをつかみやすくなり、経験者にとってはレイアウトの引き出しを増やすヒントになるでしょう。

補足ですが、この手のサンプルコード集を試してみる時におすすめなのが、疑って色々やってみることです。一旦丸コピペで動かした後に

• このHTMLタグ別の方が良くね？
• このCSS省略できんじゃね？
• 自分だったらこう書いちゃうね！

といった感じでやると、身に付き度が超アップしますよ！

かすが

と、もっともらしいことを言いつつ、記載のコードにミスがあった場合の防御線ですww

グローバルナビゲーション

See the Pen 「Flexbox」align-self:stretch by kasuga (@kntkfmgf-the-vuer) on CodePen.

WEBサイトと言えばヘッダー！ど定番ですね。ロゴとナビを横に並べつつ、さらにナビもそれぞれ横に並べるパターンが多いわけで、Flexbox大活躍です！

<header class="header">
  <div class="header_logo"><a href="">LOGO</a></div>
  <nav class="gnav">
    <ul class="gnav_menu">
      <li class="gnav_menu_item"><a href="">ナビ1</a></li>
      <li class="gnav_menu_item"><a href="">ナビ2</a></li>
      <li class="gnav_menu_item"><a href="">ナビ3</a></li>
      <li class="gnav_menu_item contact"><a href="">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #e4eff7;
  font-size: 14px;
}
.header{
  display: flex;/*ロゴとナビを横に並べる*/
  justify-content: space-between;/*ロゴとナビを両端に揃える*/
  padding: 20px;
}
.header_logo{
  background: #fff;
  border-radius: 10px;
  font-weight: bold;
  padding: 10px 30px;
}
.header_logo a{
  color: #333;
  display: block;
  text-decoration: none;
}
.gnav_menu{
  display: flex;/*ナビのアイテムを横並びにする*/
  gap:10px;/*アイテム間の余白を10pxに*/
}
.gnav_menu_item{
  background: #59b5ed;
  border-radius: 10px;
  list-style: none;
}
.contact{
  background: #333;
}
.gnav_menu_item a{
  color: #fff;
  display: block;
  font-weight: bold;
  padding: 10px 30px;
  text-decoration: none;
}

カード型ボックスのサムネイル一覧

See the Pen 「Flexbox」サンプル グローバルナビゲーション by kasuga (@kntkfmgf-the-vuer) on CodePen.

これもブログの一覧ページでお馴染みですよね。余白を取るのにずっとmarginでやっていたのですが、gapを知ってしまったら、marginがアホらしくなるくらいマジで神すぎましたww。

<div class="container">
  <ul class="post_list">
    <li class="post_list_item">
      <a href="" class="post_list_link">
        <div class="post_list_thumb">
           <img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
           </div>
        <div class="post_list_body">
          <h2 class="post_list_title">サンプルタイトル</h2>
            <p class="post_list_txt">サンプルテキスト</p>
          </div>
      </a>
    </li>
    <li class="post_list_item">
      <a href="" class="post_list_link">
        <div class="post_list_thumb">
           <img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
           </div>
        <div class="post_list_body">
          <h2 class="post_list_title">サンプルタイトル</h2>
            <p class="post_list_txt">サンプルテキストサンプルテキストサンプルテキスト</p>
          </div>
      </a>
    </li>
    <li class="post_list_item">
      <a href="" class="post_list_link">
        <div class="post_list_thumb">
           <img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
           </div>
        <div class="post_list_body">
          <h2 class="post_list_title">サンプルタイトル</h2>
            <p class="post_list_txt">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
          </div>
      </a>
    </li>
    <li class="post_list_item">
      <a href="" class="post_list_link">
        <div class="post_list_thumb">
           <img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
           </div>
        <div class="post_list_body">
          <h2 class="post_list_title">サンプルタイトル</h2>
            <p class="post_list_txt">サンプルテキスト</p>
          </div>
      </a>
    </li>
    <li class="post_list_item">
      <a href="" class="post_list_link">
        <div class="post_list_thumb">
           <img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
           </div>
        <div class="post_list_body">
          <h2 class="post_list_title">サンプルタイトル</h2>
            <p class="post_list_txt">サンプルテキストサンプルテキストサンプルテキスト</p>
          </div>
      </a>
    </li>
    <li class="post_list_item">
      <a href="" class="post_list_link">
        <div class="post_list_thumb">
           <img src="https://life-design-day.com/samples/p4175/icatch.png" alt="img">
           </div>
        <div class="post_list_body">
          <h2 class="post_list_title">サンプルタイトル</h2>
            <p class="post_list_txt">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
          </div>
      </a>
    </li>
  </ul>
</div>

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #e4eff7;
  font-size: 14px;
  padding: 40px;
}
.container{
  margin: 0 auto;
  max-width:1000px;
}
.post_list{
  display: flex;/*ボックスを横並びにする*/
  flex-wrap:wrap;/*ボックスを折り返すようにする*/
  gap:20px;
}
.post_list_item{
  list-style:none;
  width: calc( (100% - 40px) / 3 );/*ボックス間の余白が20pxになるように幅を計算*/
}
.post_list_link{
  background: #d2e7f5;
  border: 4px solid #0272fc;
  border-radius: 10px;
  font-weight: bold;
  display: block;
  height: 100%;
  padding: 30px;
  text-decoration: none;
  transition:.3s;
}
.post_list_link:hover{
  opacity: 0.8;
  transform: scale(1.05);
}
.post_list_thumb img{
  height: auto;
  max-width: 100%;
}
.post_list_title{
  color: #0272fc;
  margin-top: 30px;
}
.post_list_txt{
  color: #60b6ff;
  margin-top: 10px;
}

画像とテキストが左右交互のコンテンツ

See the Pen 「Flexbox」サンプル カード型ボックスのサムネイル一覧 by kasuga (@kntkfmgf-the-vuer) on CodePen.

コンテンツが単調にならないように、横に並んだ画像とテキストを左右交互にするレイアウトもよく見るやつですよね！

HTML上は全部、画像→テキストの順番で書いておいて、特定の箇所にだけorderで順番を変えてしまば「あら簡単！左右交互のコンテンツ出来上がり！」

<div class="container">
  <section class="sec">
    <figure class="sec_img">
      <img src="https://life-design-day.com/samples/p4175/img.png" alt="img">
    </figure>
    <div class="sec_contents">
      <div class="sec_num">Point01</div>
      <h2 class="sec_title">サンプルタイトル</h2>
      <div class="sec_txt">
        <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
      </div>
    </div>
  </section>
  <section class="sec">
    <figure class="sec_img sec_img02"><!--ここだけsec_img02クラスをつけて画像が後になるようにする-->
      <img src="https://life-design-day.com/samples/p4175/img.png" alt="img">
    </figure>
    <div class="sec_contents">
      <div class="sec_num">Point02</div>
      <h2 class="sec_title">サンプルタイトル</h2>
      <div class="sec_txt">
        <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
      </div>
    </div>
  </section>
  <section class="sec">
    <figure class="sec_img">
      <img src="https://life-design-day.com/samples/p4175/img.png" alt="img">
    </figure>
    <div class="sec_contents">
      <div class="sec_num">Point03</div>
      <h2 class="sec_title">サンプルタイトル</h2>
      <div class="sec_txt">
        <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
      </div>
    </div>
  </section>
</div>

*{
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
body{
  background: #e4eff7;
  padding: 40px;
}
.container{
  display: flex;
  flex-wrap:wrap;/*.secを折り返すようにする*/
  flex-derection:column;/*上から下に並ぶようにする*/
  gap:60px;/*.secの間の余白を60pxに*/
  margin: 0 auto;
  max-width:1000px;
}
.sec{
  align-items: center;
  display: flex;/*画像とテキストを横並びにする*/
  gap:40px;/*画像とテキストの間の余白を40px*/
}
.sec_img{
  width: 40%;
}
.sec_img img{
  height: auto;
  max-width: 100%;
}
.sec_contents{
  width: 60%;
}
.sec_img02{
  order: 2;/*2つ目の.sec内の画像の.sec_img02にorder:2を指定して、テキストより後になるようにする*/
}
.sec_num{
  background: #0272fc;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  padding: 0 5px;
}
.sec_title{
  color: #0272fc;
  font-size: 24;
  margin-top: 20px;
}
.sec_txt{
  color: #60b6ff;
  font-size: 18px;
  line-height: 2;
  margin-top: 10px;
}

Flexboxのまとめ

ここまで、CSSのFlexboxについて基本から応用まで幅広く解説してきました。Flexboxは、複雑だった従来のレイアウト設計をシンプルかつ柔軟に変える非常に強力な機能です。

最後に、これまでの内容を振り返りながら、ポイントを整理しておきましょう。

✏️ 学習のコツと次のステップ

基本プロパティを覚えたら、小さなUIコンポーネントから実践してみましょう。どのプロパティが親要素用か子要素用かを意識するだけでも理解が深まります。

実際のWebサイトを見て、「これはFlexboxで作られているかも？」と観察するクセをつけるのもおすすめです。

Flexboxをマスターすることで、コーディングの生産性と表現力が大きく向上します。最初は覚えることが多く感じるかもしれませんが、一度身につければ一生使える武器になる技術です。

ぜひ、今回のまとめを何度も見返しながら、自分の手で実装してみてください。

以下の記事では、HTML・CSSの初心者に本当におすすめできる書籍を厳選して紹介しています。「何から始めたらいいかわからない」という方にも、自信をもっておすすめできる10冊をまとめました。

ぜひこちらもチェックしてみてください。

あわせて読みたい

HTML・CSS初心者必見！絶対に失敗しないおすすめ本10選 HTMLやCSSを勉強したいけれど、どの本を選べばいいのかわからない… そんな悩みを抱えて、何冊も比較しては決めきれずにいませんか？ この記事は、これからWeb制作を始め…