ブログBLOG

【保存版】コピペでOK！Flexboxで作る頻出レイアウトの構造解説（サンプル付き）

更新日：2021/01/21

【保存版】コピペでOK！Flexboxで作る頻出レイアウトの構造解説
要素を横並びにするとき、Flexboxってとっても便利ですよね！
Floatを使用して実装するよりも少ないコードで、よりシンプルに実装することができるので皆様もお世話になっているのではないでしょうか？
以前まではブラウザによって挙動が違ったりサポートしていなかったりといった問題がありましたが、最近ではほとんどのブラウザで安定して使用できるようになったのも嬉しい点です。

この記事では、そんなFlexboxを使った頻出レイアウトのご紹介と仕組みの解説をしていきたいと思います。
「子要素のテキストを上下中央揃えにしたい」「ボタンだけは下寄せにしたい」といった、よく見るデザインながら初心者さんが困りがちなレイアウトをまとめてみました。
これが分かれば、組み合わせてもっと多くのレイアウトをさくっと作れるようになるはずです。

まず基本知識としてFlexboxで設定できるプロパティから解説していきますが、「とりあえず頻出レイアウトを見たい」という方は、頻出レイアウト解説からご覧ください。
「まだイマイチ理解できていないんだよな…」という方は、ぜひ上から順に読んで頂ければ理解が深まることと思います！

Flexboxの基本設定

Flexboxは、親要素（フレックスコンテナ）にdisplay: flexをかけて、その直下の子要素（フレックスアイテム）で個別に位置調整するという親子構造が基本となります。
複雑なレイアウトも、この親子構造を組み合わせることで実現していきます。

こちらの例では「sample」というクラス名のついた親要素の中に、「item」というクラス名のついた子要素を入れております。

[HTML]


<div class="sample">
  <div class="item">item01</div>
  <div class="item">item02</div>
  <div class="item">item03</div>
</div>

</div>

このままでは子要素が縦に並んでいる状態なので、Flexboxを使って子要素を横並びにしていきましょう。

[CSS]


.sample{
  display: flex;
}

.sample{

display: flex;

}

子要素が横並びになりましたね！
Flexboxを使えば、たったこれだけの記述で横並びにできてしまうんです。とても便利ですね。
横並びにできたら、必要に応じてその他の細かな設定を行っていきます。

※ここではflexboxに注目して、marginなどの設定は割愛しています。

親要素（フレックスコンテナ）に設定できるプロパティ

それでは親要素に設定できるプロパティを確認してみましょう。

垂直方向の位置： align-items

こちらは子要素の垂直方向の位置を指定するプロパティです。上下を揃えたいときに使用します。

stretch （初期値）	子要素を上下の余白を埋めるように配置
flex-start	子要素を上揃えに配置
flex-end	子要素を下揃えに配置
center	子要素を上下中央揃えに配置
baseline	子要素をベースラインに揃えて配置

複数行にした時の揃え： align-content

こちらは子要素が複数行の時の、垂直方向の位置を指定するプロパティです。

stretch （初期値）	子要素の行を余白を埋めるように配置
flex-start	子要素の行を上揃えで配置
flex-end	子要素の行を下揃えに配置
center	子要素の行を上下中央揃えに配置
space-between	最上行と最下行の子要素を余白を空けずに配置し、残りの子要素行は均等に間隔を空けて配置
space-around	最上行と最下行の子要素を含め、均等に間隔を空けて配置

水平方向の位置： justify-content

親要素に空きスペースがあった場合、子要素を水平方向のどの位置に配置するかを指定します。

flex-start （初期値）	子要素を左揃えで配置
flex-end	子要素を右揃えで配置
center	子要素を左右中央揃えで配置
space-between	最初と最後の子要素を余白を開けずに配置し、残りの子要素は均等に間隔を空けて配置
space-around	両端の子要素も含めて、均等に間隔を空けて配置

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

子要素を一行、または複数行に並べるかを指定します。
flex-wrap: wrapを指定することで、子要素が親要素の幅を超えてしまった場合、折り返して複数行に配置されていきます。

nowrap （初期値）	子要素を折り返さずに一列に配置
wrap	複数行の子要素を上から下へと配置
wrap-reverse	複数行の子要素を下から上へと配置

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

子要素を配置していく向きを指定するプロパティです。横または縦に配置できます。

row （初期値）	子要素を水平方向に左から右へ配置
row-reverse	子要素を水平方向に右から左へと配置
column	子要素を垂直方向に上から下へと配置
column-reverse	子要素を垂直方向に下から上へと配置

flex-directionとflex-wrapを一括指定： flex-flow

flex-direction、flex-wrapを１つにまとめて設定することができます。初期値は row nowrapです。


/*例*/
.sample {
  flex-flow: ［flex-directionの値］ ［flex-wrapの値］;
 }

/*実際の書き方*/
.sample {
  display: flex;
  flex-flow: row wrap;
 }

/*例*/

.sample {

flex-flow: ［flex-directionの値］［flex-wrapの値］;

}

/*実際の書き方*/

.sample {

display: flex;

flex-flow: row wrap;

}

子要素（フレックスアイテム）に設定できるプロパティ

続いて、子要素に設定できるプロパティを確認していきましょう。

子要素の並び順を指定： order

記述順に表示されるのが通常ですが、orderを使用すれば任意の順に並び替えることができます。


.item01 {
  order: 3;
 }
.item02 {
  order: 2;
 }
.item03 {
  order: 1;
 }
.item04 {
  order: 2:
 }
.item05 {
  order: 4;
 }

.item01 {

order: 3;

}

.item02 {

order: 2;

}

.item03 {

order: 1;

}

.item04 {

order: 2:

}

.item05 {

order: 4;

}

子要素の伸び率を指定： flex-grow

フレックスアイテムを他の要素と比べてどのくらい伸ばすか指定するプロパティです。
flex-grow：2のように数値で記述します。


.item02 {
  flex-grow: 2;
 }

.item02 {

flex-grow: 2;

}

子要素の縮み率を指定： flex-shrink

フレックスアイテムを他の要素と比べてどのくらい縮めるか指定するプロパティです。
flex-shrink：2のように数値で記述します。
固定幅にしたい要素なのに縮んでしまった、というときは、縮小させないようにflex-shrink：0を指定します。


.item02 {
  flex-shrink: 2;
 }

.item02 {

flex-shrink: 2;

}

子要素のベースとなる幅の指定： flex-basis

子要素に対しwidthと同じように幅の値を指定できます。
初期値はautoなので、特に指定しなければ子要素のコンテンツのサイズが適応されます。
flex-basis：200pxやflex-basis：10%のように数値で記述します。


.item01 {
  flex-basis:10%;
 }
.item02 {
  flex-basis:20%;
 }
.item03 {
  flex-basis:30%;
 }
.item04 {
  flex-basis:40%;
 }

.item01 {

flex-basis:10%;

}

.item02 {

flex-basis:20%;

}

.item03 {

flex-basis:30%;

}

.item04 {

flex-basis:40%;

}

子要素の伸び率、縮み率、ベースの幅を一括指定： flex

flex-grow、flex-shrink、flex-basisを１つにまとめて設定することができます。初期値は 0 1 autoです。
flex: 1はflex: 1 1 0;という意味になります。


/*例*/
.item02 {
  flex: ［flex-growの値］ ［flex-shrinkの値］ ［flex-basisの値］;
 }

/*実際の書き方*/
.item02 {
  flex: 0 1 20%;
 }

/*例*/

.item02 {

flex: ［flex-growの値］［flex-shrinkの値］［flex-basisの値］;

}

/*実際の書き方*/

.item02 {

flex: 0 1 20%;

}

子要素の垂直方向の位置を指定： align-self

子要素の記述することで、個別に垂直方向の位置を指定することができます。
親要素に指定するalign-itemsと機能は同じですが、こちらは子要素に対しての指定になります。
align-selfを指定した場合は、align-itemsよりも優先されるのでご注意ください。

頻出するレイアウト解説

ここからは、Webサイトを作るうえで頻繁に登場するレイアウトを紹介していきます。
仕組みを理解して、ぜひカスタマイズしてみてください！

サンプルページをご用意させてただきました。これからご紹介するレイアウトが一覧になっております。
サンプルページ

頻出レイアウトその①：ナビゲーション

こちらは1番ベーシックな形ですね。非常によく見かけます。
横並びのリンクの高さを合わせて、中身のテキストは上下中央揃えにするという形です。

HTMLソースの表示


<div class="sample01 sample-wrap">
  <ul class="nav">
    <li class="item"><a href="#">テキスト</a></li>
    <li class="item"><a href="#">テキストテキスト<br>テキスト</a></li>
    <li class="item"><a href="#">テキストテキスト</a></li>
  </ul>
</div>

<li class="item"><a href="#">テキストテキスト<br>テキスト</a></li>

<li class="item"><a href="#">テキストテキスト</a></li>

</ul>

</div>

[CSS]


/* ❶ */
.sample01 .nav {
  display: flex;
}

/* ❷ */
.sample01 .nav .item a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

/* ❶ */

.sample01 .nav {

display: flex;

}

/* ❷ */

.sample01 .nav .item a {

display: flex;

align-items: center;

justify-content: center;

text-align: center;

height: 100%;

}

❶.nav に flex を指定し、.item を横並びにする
❷.item a にも flex を指定し、height: 100%; で高さを合わせ、テキストを上下中央揃えにする

頻出レイアウトその②：ナビゲーション – 親要素の横幅いっぱいに広げて均等分割

htmlは①と同じで、上段は.itemが3つ、下段は.itemが4つという構造です。

[CSS]


/* ❶ */
.sample02 .nav {
  display: flex;
}
.sample02 .nav .item {
  flex: 1; /* ★ポイント★ */
}

/* ❷ */
.sample02 .nav .item a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

/* ❶ */

.sample02 .nav {

display: flex;

}

.sample02 .nav .item {

flex: 1; /* ★ポイント★ */

}

/* ❷ */

.sample02 .nav .item a {

display: flex;

align-items: center;

justify-content: center;

text-align: center;

height: 100%;

}

❶.nav に flex を指定し、.item を横並びにする
.item に flex: 1 を指定し、横幅いっぱいに広げる
❷.item a にも flex を指定し、height: 100%; で高さを合わせ、テキストを上下中央揃えにする

★ポイント★

伸ばしたい子要素にflex: 1;を指定することで、余白を子要素に指定した割合で埋めようとしてくれます。
今回指定した割合は1となるので、親要素の横幅100%で均等分割になるように伸びてくれます。

頻出レイアウトその③：ヘッダー

ヘッダーのベーシックなレイアウトです。

HTMLソースの表示


<div class="sample03 sample-wrap">
  <div class="header">
    <div class="logo">
      <a href="#"><img src="./img/logo.png" alt="LOGO">SAMPLE inc.</a>
    </div>
    <div class="menu">
      <ul class="nav">
        <li class="item"><a href="#">テキスト</a></li>
        <li class="item"><a href="#">テキストテキ</a></li>
        <li class="item"><a href="#">テキスト</a></li>
      </ul>
      <div class="btn"><a href="#">CONTACT</a></div>
    </div>
  </div>
</div>

<a href="#"><img src="./img/logo.png" alt="LOGO">SAMPLE inc.</a>

</div>

<li class="item"><a href="#">テキストテキ</a></li>

</ul>

<div class="btn"><a href="#">CONTACT</a></div>

</div>

[CSS]


.sample03 .header {
  background: #fef3ed;
  padding: 15px 30px;
}

.sample03 .btn {
  margin-left: 30px;
}

/* ❶ */
.sample03 .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ❷ */
.sample03 .logo a {
  display: flex;
  align-items: center;
}

.sample03 .logo a img{
  margin-right: 10px;
}

/* ❸ */
.sample03 .menu {
  display: flex;
  align-items: center;
}

/* ❹ */
.sample03 .nav {
  display: flex;
}

/* ❺ */
.sample03 .nav .item a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.sample03 .header {

background: #fef3ed;

padding: 15px 30px;

}

.sample03 .btn {

margin-left: 30px;

}

/* ❶ */

.sample03 .header {

display: flex;

align-items: center;

justify-content: space-between;

}

/* ❷ */

.sample03 .logo a {

display: flex;

align-items: center;

}

.sample03 .logo a img{

margin-right: 10px;

}

/* ❸ */

.sample03 .menu {

display: flex;

align-items: center;

}

/* ❹ */

.sample03 .nav {

display: flex;

}

/* ❺ */

.sample03 .nav .item a {

display: flex;

align-items: center;

justify-content: center;

text-align: center;

height: 100%;

}

❶.header に flex を指定し、.logo と .menu を横並びにする
❷.logo a に flex を指定し、ロゴ画像とテキストを上下中央揃えにする
❸.menu に flex を指定し、.nav と .btn を横並びにする
❹.nav に flex を指定し、.item を横並びにする
❺.item a に flex を指定し、高さを合わせ、テキストを上下中央揃えにする

★ポイント★

justify-content: space-between;を指定することで、最初と最後の子要素が両端に配置されます。

頻出レイアウトその④-1：カード – ボタンだけ下揃え

こちらはブログやコラムの一覧ページでよく見かけますね。
absoluteで配置したり、jsで調整したりしなくても、flexboxを使えば簡単に実現できます。

HTMLソースの表示


<div class="sample04 sample-wrap">
  <ul class="card">
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキスト</p>
        <div class="btn"><span>MORE</span></div>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <div class="btn"><span>MORE</span></div>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <div class="btn"><span>MORE</span></div>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキスト</p>
        <div class="btn"><span>MORE</span></div>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキストテキストテキスト</p>
        <div class="btn"><span>MORE</span></div>
      </a>
    </li>
  </ul>
</div>

<p class="txt">テキストテキストテキストテキストテキスト</p>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</li>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキスト</p>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</li>

</ul>

</div>

[CSS]


/* ❶ */
.sample04 .card {
  display: flex;
  flex-wrap: wrap;
}

.sample04 .card .item {
  width: 33%;
}

.sample04 .card .item:not(:nth-child(3n)) {
  margin-right: 15px;
}

.sample04 .card .item:nth-child(n+4) {
  margin-top: 15px;
}

/* ❷ */
.sample04 .card .item a {
  display: flex;
  flex-direction: column; /* ★ポイント★ */
  height: 100%;
}

.sample04 .card .btn {
  margin-top: auto; /* ★ポイント★ */
  padding-top: 12px;
}

/* ❶ */

.sample04 .card {

display: flex;

flex-wrap: wrap;

}

.sample04 .card .item {

width: 33%;

}

.sample04 .card .item:not(:nth-child(3n)) {

margin-right: 15px;

}

.sample04 .card .item:nth-child(n+4) {

margin-top: 15px;

}

/* ❷ */

.sample04 .card .item a {

display: flex;

flex-direction: column; /* ★ポイント★ */

height: 100%;

}

.sample04 .card .btn {

margin-top: auto; /* ★ポイント★ */

padding-top: 12px;

}

❶.card に flex を指定し、.item を横並びにする
❷.item a に flex を指定し、height: 100%; で高さを合わせる。
中身が横並びになるので、flex-direction: column; を指定して縦並びに戻す。

★ポイント★

flex-direction: column;を指定し、水平方向の配置から垂直方向に配置に切り替えます。
また、margin-top: auto;を指定することで、ボタンの位置が下に揃えられます。

頻出レイアウトその④-2：カード – ボタンだけ下揃え（テキストの高さを揃える場合）

テキストの高さを揃える形でも、ボタンを下寄せにすることができます。
状況に応じて④-1のほうと使い分けましょう。

HTMLソースの表示


<div class="sample04-b sample-wrap">
  <ul class="card">
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキストテキストテキスト</p>
        <div class="btn"><span>MORE</span></div>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <div class="btn"><span>MORE</span></div>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキストテキストテキスト</p>
        <div class="btn"><span>MORE</span></div>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <div class="btn"><span>MORE</span></div>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキスト</p>
        <div class="btn"><span>MORE</span></div>
      </a>
    </li>
  </ul>
</div>

<p class="txt">テキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキスト</p>

</a>

</li>

</ul>

</div>

[CSS]


/* ❶ */
.sample04-b .card {
  display: flex;
  flex-wrap: wrap;
}

.sample04-b .card .item {
  width: 32%;
}

.sample04-b .card .item:not(:nth-child(3n)) {
  margin-right: 15px;
}

.sample04-b .card .item:nth-child(n+4) {
  margin-top: 15px;
}

/* ❷ */
.sample04-b .card .item a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sample04-b .card .txt {
  background: #fff;
  margin: 5px 0 15px;
  padding: 10px;
  flex-grow: 1; /* ★ポイント★ */
}

.sample04-b .card .btn {
  margin-top: auto;
}

/* ❶ */

.sample04-b .card {

display: flex;

flex-wrap: wrap;

}

.sample04-b .card .item {

width: 32%;

}

.sample04-b .card .item:not(:nth-child(3n)) {

margin-right: 15px;

}

.sample04-b .card .item:nth-child(n+4) {

margin-top: 15px;

}

/* ❷ */

.sample04-b .card .item a {

display: flex;

flex-direction: column;

height: 100%;

}

.sample04-b .card .txt {

background: #fff;

margin: 5px 0 15px;

padding: 10px;

flex-grow: 1; /* ★ポイント★ */

}

.sample04-b .card .btn {

margin-top: auto;

}

❶.card に flex を指定し、 .item を横並びにする
❷.item a に flex を指定し、height: 100%; で高さを合わせる
中身が横並びになるので、flex-direction: column; を指定して縦並びに戻す
❸.card .txt に flex-grow: 1 を指定する

★ポイント★

flex-grow: 1;を指定することで、親要素の余白を埋めるように要素が伸びるので、ボタンを下寄せにすることができます。

頻出レイアウトその⑤：カード – 1段ごとに均等分割

一見難易度が高そうですが、flexを使えばとっても簡単です。

HTMLソースの表示


<div class="sample05 sample-wrap">
  <ul class="card">
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキスト</p>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキストテキストテキスト</p>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキスト</p>
      </a>
    </li>
    <li class="item">
      <a href="dummy">
        <p class="ttl">タイトル</p>
        <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </a>
    </li>
  </ul>
</div>

<p class="txt">テキストテキストテキストテキストテキスト</p>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキスト</p>

</a>

</li>

<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</a>

</li>

</ul>

</div>

[CSS]


/* ❶ */
.sample05 .card {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px -15px 0;
}

.sample05 .card .item {
  flex: 1; /* ★ポイント★ */
  margin: 0 15px 15px 0;
  min-width: 32%; /* ★ポイント★ */
}

/* ❷ */
.sample05 .card .item a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ❶ */

.sample05 .card {

display: flex;

flex-wrap: wrap;

margin: 0 -15px -15px 0;

}

.sample05 .card .item {

flex: 1; /* ★ポイント★ */

margin: 0 15px 15px 0;

min-width: 32%; /* ★ポイント★ */

}

/* ❷ */

.sample05 .card .item a {

display: flex;

flex-direction: column;

height: 100%;

}

❶.card に flex を指定し、 .item を横並びにする
.item の最小幅を min-width で指定（サンプルでは最大3分割で指定）
❷.item a に flex を指定し、height: 100%; で高さを合わせる。
中身が横並びになるので、flex-direction: column; を指定して縦並びに戻す。

★ポイント★

コンテンツの最小幅をmin-widthで指定します。
flex: 1;を指定することで、最小幅以下にならない範囲でコンテンツが分割されて配置されます。
また、余白も埋めてくれるため親要素100%に伸ばされます。

頻出レイアウトその⑥：画像とテキストの横並びレイアウト – テキストを上下中央揃え

商品紹介ページなどで多く見かける印象です。

HTMLソースの表示


<div class="sample06 sample-wrap">
  <div class="box">
    <div class="img"><img src="https://placehold.jp/180x150.png" alt=""></div>
    <div class="desc">
      <p class="ttl">タイトル</p>
      <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <div class="btn"><a href="dummy">MORE</a></div>
    </div>
  </div>
  <div class="box">
    <div class="img"><img src="https://placehold.jp/180x150.png" alt=""></div>
    <div class="desc">
      <p class="ttl">タイトル</p>
      <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <div class="btn"><a href="dummy">MORE</a></div>
    </div>
  </div>
</div>

<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

[CSS]


/* ❶ */
.sample06 .box {
  display: flex;
}

.sample06 .box .img {
  flex-shrink: 0; /* ★ポイント★ */
}

/* ❷ */
.sample06 .box .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
  width: 100%;
}

/* ❶ */

.sample06 .box {

display: flex;

}

.sample06 .box .img {

flex-shrink: 0; /* ★ポイント★ */

}

/* ❷ */

.sample06 .box .desc {

display: flex;

flex-direction: column;

justify-content: center;

padding-left: 20px;

width: 100%;

}

❶.box に flex を指定し、 .img と .desc を横並びにする
❷.desc に flex を指定すると中身が横並びになるので、flex-direction: column; を指定して縦並びに戻す。
justify-content: center; を指定し、中身を上下中央揃えにする

★ポイント★

flex-shrink: 0;を指定することで、画像の大きさが縮小されずに表示されます。

頻出レイアウトその⑦：画像とテキストの横並びレイアウト – ボタンだけ下揃え

こちらは⑥のCSSを変えたバージョンなので、HTMLコードは割愛させていただきます。

[CSS]



/* ❶ */
.sample07 .box {
  display: flex;
}

.sample07 .box .img {
  flex-shrink: 0;
}

/* ❷ */
.sample07 .box .desc {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  width: 100%;
}

.sample07 .box .txt {
  flex-grow: 1;
}

/* ❶ */

.sample07 .box {

display: flex;

}

.sample07 .box .img {

flex-shrink: 0;

}

/* ❷ */

.sample07 .box .desc {

display: flex;

flex-direction: column;

padding-left: 20px;

width: 100%;

}

.sample07 .box .txt {

flex-grow: 1;

}

❶.box に flex を指定し、 .img と .desc を横並びにする
❷.desc に flex を指定すると中身が横並びになるので、flex-direction: column; を指定して縦並びに戻す。
.txt に flex-grow: 1 を指定することで親要素の余白を埋めるように要素が伸びるので、ボタンを下寄せにすることができる。

頻出レイアウトその⑧：画像とテキストの互い違い（左右交互）レイアウト

少し動きをつけたいときによく使う活用するレイアウトです。

HTMLソースの表示


<div class="sample08 sample-wrap">
  <div class="box">
    <div class="img"><img src="https://placehold.jp/180x150.png" alt=""></div>
    <div class="desc">
      <p class="ttl">タイトル</p>
      <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <div class="btn"><a href="dummy">MORE</a></div>
    </div>
  </div>
  <div class="box">
    <div class="img"><img src="https://placehold.jp/180x150.png" alt=""></div>
    <div class="desc">
      <p class="ttl">タイトル</p>
      <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <div class="btn"><a href="dummy">MORE</a></div>
    </div>
  </div>
  <div class="box">
    <div class="img"><img src="https://placehold.jp/180x150.png" alt=""></div>
    <div class="desc">
      <p class="ttl">タイトル</p>
      <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <div class="btn"><a href="dummy">MORE</a></div>
    </div>
  </div>
</div>

<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

</div>

[CSS]


/* ❶ */
.sample08 .box {
  display: flex;
}

.sample08 .box .img {
  flex-shrink: 0;
}

.sample08 .box:nth-child(even) {
  flex-direction: row-reverse;/* ★ポイント★ */
}

.sample08 .box:nth-child(odd) .desc {
  padding-left: 20px;
}

.sample08 .box:nth-child(even) .desc {
  padding-right: 20px;
}

/* ❷ */
.sample08 .box .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* ❶ */

.sample08 .box {

display: flex;

}

.sample08 .box .img {

flex-shrink: 0;

}

.sample08 .box:nth-child(even) {

flex-direction: row-reverse;/* ★ポイント★ */

}

.sample08 .box:nth-child(odd) .desc {

padding-left: 20px;

}

.sample08 .box:nth-child(even) .desc {

padding-right: 20px;

}

/* ❷ */

.sample08 .box .desc {

display: flex;

flex-direction: column;

justify-content: center;

width: 100%;

}

❶.box に flex を指定し、 .img と .desc を横並びにする
偶数番目の .box に flex-direction: row-reverse; を指定して順番を逆にする
❷.desc に flex を指定すると中身が横並びになるので、flex-direction: column; を指定して縦並びに戻す。
justify-content: center; を指定し、中身を上下中央揃えにする

★ポイント★

flex-direction: row-reverse;を指定するだけで、並び順を逆にすることができます。

最後に

以上、8つの頻出レイアウトを解説させていただきました。
お目当てのレイアウトはありましたでしょうか？
一見難しそうなレイアウトでも、Flexを使えば簡単に実装することができますね。
floatで苦い経験をしてきた私にとっては、Flexboxは魔法のようなコードといっても過言ではないです…！

様々なサイトを見てみると、他にも色んなレイアウトでFlexboxが使用されているので、ぜひマスターしてカスタマイズしてみてください！
本記事のサンプルが、皆様のサイト制作のお役に立てれば幸いです。

コーディング

一覧へ戻る

ブログBLOG

【保存版】コピペでOK！Flexboxで作る頻出レイアウトの構造解説（サンプル付き）

Flexboxの基本設定

親要素（フレックスコンテナ）に設定できるプロパティ

垂直方向の位置： align-items

複数行にした時の揃え： align-content

水平方向の位置： justify-content

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

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

flex-directionとflex-wrapを一括指定： flex-flow

子要素（フレックスアイテム）に設定できるプロパティ

子要素の並び順を指定： order

子要素の伸び率を指定： flex-grow

子要素の縮み率を指定： flex-shrink

子要素のベースとなる幅の指定： flex-basis

子要素の伸び率、縮み率、ベースの幅を一括指定： flex

子要素の垂直方向の位置を指定： align-self

頻出するレイアウト解説

頻出レイアウトその①：ナビゲーション

頻出レイアウトその②：ナビゲーション – 親要素の横幅いっぱいに広げて均等分割

頻出レイアウトその③：ヘッダー

頻出レイアウトその④-1：カード – ボタンだけ下揃え

頻出レイアウトその④-2：カード – ボタンだけ下揃え（テキストの高さを揃える場合）

頻出レイアウトその⑤：カード – 1段ごとに均等分割

頻出レイアウトその⑥：画像とテキストの横並びレイアウト – テキストを上下中央揃え

頻出レイアウトその⑦：画像とテキストの横並びレイアウト – ボタンだけ下揃え

頻出レイアウトその⑧：画像とテキストの互い違い（左右交互）レイアウト

最後に

関連記事

Category

Search

Weekly Ranking

ブログBLOG

【保存版】コピペでOK！Flexboxで作る頻出レイアウトの構造解説（サンプル付き）

Flexboxの基本設定

親要素（フレックスコンテナ）に設定できるプロパティ

垂直方向の位置 ： align-items

複数行にした時の揃え ： align-content

水平方向の位置 ： justify-content

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

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

flex-directionとflex-wrapを一括指定 ： flex-flow

子要素（フレックスアイテム）に設定できるプロパティ

子要素の並び順を指定 ： order

子要素の伸び率を指定 ： flex-grow

子要素の縮み率を指定 ： flex-shrink

子要素のベースとなる幅の指定 ： flex-basis

子要素の伸び率、縮み率、ベースの幅を一括指定 ： flex

子要素の垂直方向の位置を指定 ： align-self

頻出するレイアウト解説

頻出レイアウトその①：ナビゲーション

頻出レイアウトその②：ナビゲーション – 親要素の横幅いっぱいに広げて均等分割

頻出レイアウトその③：ヘッダー

頻出レイアウトその④-1：カード – ボタンだけ下揃え

頻出レイアウトその④-2：カード – ボタンだけ下揃え（テキストの高さを揃える場合）

頻出レイアウトその⑤：カード – 1段ごとに均等分割

頻出レイアウトその⑥：画像とテキストの横並びレイアウト – テキストを上下中央揃え

頻出レイアウトその⑦：画像とテキストの横並びレイアウト – ボタンだけ下揃え

頻出レイアウトその⑧：画像とテキストの互い違い（左右交互）レイアウト

最後に

関連記事

Category

Search

Weekly Ranking

垂直方向の位置： align-items

複数行にした時の揃え： align-content

水平方向の位置： justify-content

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

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

flex-directionとflex-wrapを一括指定： flex-flow

子要素の並び順を指定： order

子要素の伸び率を指定： flex-grow

子要素の縮み率を指定： flex-shrink

子要素のベースとなる幅の指定： flex-basis

子要素の伸び率、縮み率、ベースの幅を一括指定： flex

子要素の垂直方向の位置を指定： align-self