Flexboxについて

Flexboxとは

• CSS3 Flexible Box (可変ボックス)
• ボックスのレイアウト方法を定めるCSSの機能
• ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能（flex）にします
  • flex：融通のきく、柔軟なという意味

フレックスボックスの基本概念

developer.mozilla.org

Flexboxで可能なボックスの操作

Flexコンテナー（親要素）の中にFlexアイテム（子要素）入れて以下の操作ができます。

• 横並び
• 縦並び
• 拡大
• 縮小
• 左揃え / 中央揃え / 右揃え
• 上揃え / 中央揃え / 下揃え
• 均等配置
• 複数行のレイアウト
• 並び方向の変更
• 並び順の変更

レイアウトの指定方法

• Flexコンテナー（親要素）の直下にFlexアイテム（子要素）を記述します。
  • ※ナビゲーションなどでulliで記述する場合もあります。

＜HTML＞

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

＜CSS＞
以下の指定で、子要素のdiv.itemが横並びになります。
インライン要素の場合はdisplay: inline-flex;を使用します。

.container {
  display: flex;
}

▽よく使用するもののメモ▽

Flexコンテナー（親要素）に指定するプロパティ

flex-direction ：子要素の並びの指定

.container {
  display: flex;
  flex-direction: row;
}

• row（初期値）：横並び
• column：縦並び

※　-reverseは逆順
※RTL（右から左に流れる言語など）のときは逆向き

flex-wrap：子要素の折り返しの指定

子要素を一行か複数行に並べる指定をできます。
複数行の場合は、子要素が親要素の幅を超えた場合に折り返して複数行になります。

• nowrap（初期値）：子要素を折り返さず、一行に並べる
• wrap：子要素を折り返し、複数行に上から下へ並べる

※　-reverseは逆順

flex-flow：flex-directionとflex-wrapをまとめて指定（ショートハンド）

＜CSS＞

.container {
  display: flex;
  flex-flow: row wrap;
}

justify-content：水平方向の指定

• flex-start（初期値）：左揃え
• flex-end：右揃え
• center：中央揃え
• space-between：均等配置（左右の隙間なし）
• space-around：均等配置（左右の隙間あり）

※RTL（右から左に流れる言語など）のときは逆向き

align-items：垂直方向の指定

• stretch（初期値）：親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
• flex-start：上揃え
• flex-end：下揃え
• center：中央揃え
• baseline：ベースライン揃え

align-content：複数行のときの指定

＜CSS＞

.container {
  display: flex;
  flex-wrap: wrap;/* 1行で折り返しが効いていない場合は、nowrap（初期値）でalign-contentが無効になるので入れる */
  align-content: space-between;/* 垂直方向 均等配置（左右の隙間なし） */
}

• stretch（初期値）：親要素の高さに合わせて広げて配置
• flex-start：上揃え
• flex-end：下揃え
• center：中央揃え
• space-between：均等配置（上下の隙間なし）
• space-around ：均等配置（上下の隙間あり）

ポイント

• left/topはflex-start、right/bottomはflex-endを使用します。

• 右下揃えの場合

＜CSS＞

.container {
  display: flex;
  justify-content: flex-end;/* 水平方向 右揃え */
  align-items: flex-end;/* 垂直方向 下揃え */
}

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

※Flexアイテム内で個別の指定をする場合は、クラス名を個別につける必要があります。
＜HTML＞

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

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

• auto（初期値）
• widthのように、パーセンテージやピクセル値で指定できる

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

• auto（初期値）：親要素の align-items の値を継承
• stretch：親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
• flex-start：（親要素の開始位置から）上揃え
• flex-end：（親要素の終点から）下揃え
• center：中央揃え
• baseline：ベースライン揃え

応用

ヘッダー部分の右上にロゴ、左下にナビゲーションのレイアウト

• PC表示：全体を左右均等下揃え、ロゴを左上揃えにします。
• SP表示：画面全体に広げます。

＜PC表示＞

＜SP表示＞

＜HTML＞

<div class="container">
  <h1 class="logo">logo</h1>
  <nav>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </nav>
</div>

＜CSS＞

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 250px;/* 任意 */
}
.logo {
  justify-content: flex-start;
  align-self: flex-start;
}
ul {
  display: flex;
}
@media screen and (max-width: 480px) {
  .container  {
    display: block;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
  }
  li {
    width: calc(100% / 4);
  }
}

３カラムレイアウト

• PC表示：３カラム
• SP表示：１カラム

＜PC表示＞

＜SP表示＞

＜HTML＞

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

＜CSS＞

.container  {
  display: flex;
  justify-content: space-between;
  height: 250px;/* 任意 */
}
.item {
  flex-basis: calc(100% / 3);
}
@media screen and (max-width: 480px) {
  .container {
    display: block;
  }
  .item {
    flex-basis: 100%;
  }
}

＜参考サイト＞

odnax.hatenablog.com
developer.mozilla.org
www.webcreatorbox.com
mamewaza.com