📌

Flexbox(Flexレイアウト)

に公開
tech

はじめに

Flexレイアウトの利点

Flexレイアウトは旧レイアウト方法の欠点を解消し、

  • 複雑な内容を上下左右に簡単にレイアウト可能
  • 高さが消えず、clearfixが不要
  • HTMLソースはそのままに、CSSのみで順序を入れ替え可能
  • 中央寄せ、均等分布などの画像ソフトで行なうような整列をHTML上で簡単に実現可能
  • 親や子の箱のサイズが拡大縮小しても、その空間に応じて柔軟性高くレイアウトが可変する
    などの利点があります。

Flexレイアウトの注意点

Flexレイアウトはこのように利便性に優れたレイアウト方法ですが、同時に注意しなければならない点もあります。
以下のIEはInternet Explorerを表しています。

古いブラウザでは非対応

Flexboxは比較的新しいプロパティであるため、古いブラウザでは対応しておらず、使用した場合表示が大きく崩れます。
現在普及している主要なブラウザでは基本的に対応しているためほとんど気にする必要はありませんが、
もし古い環境（～IE9など）での動作もカバーする場合は注意が必要です。

IEでは最新版でも挙動がおかしい場合がある

IE11・Edge(旧バージョン)などのIE系ブラウザの最新版も勿論Flexboxに対応しています。
しかしこれらIE系ブラウザにおいては最新版であってもバグがあり、正しい記述をしても表示が崩れる場合があります。

原因は多岐に渡るため、もし思わぬ挙動をする場合はインターネットの最新情報などから都度原因を調査する必要があります。

FlexコンテナーとFlexアイテム

Flexコンテナー

Flexレイアウトを行うための親の箱です。cssなどにdisplay:flexと設定することでFlexコンテナーになります。
Flexコンテナーとなった箱は更に、内容の 並ぶ方向(横・縦) / 横方向の整列方法 / 縦方向の整列方法 / 折り返し方法 などを同時に設定することができます。

Flexアイテム

Flexコンテナー内に直接入っている要素は全て自動的にFlexアイテムとなります。
Flexアイテムとなった要素は更に 並び順 / 伸縮比率 / 個別の縦位置などを簡単に設定することができます。

Flexコンテナーで指定できるプロパティ

例として以下のようなHTMLファイルをベースに編集していきます。

htmlファイル
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>flexbox</title>
  </head>
  <body>
    <div class="flex">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

flex-direction

Flexコンテナーの内容の並ぶ方向を指定できます。

cssファイル
.flex {
  display: flex;
  flex-direction: row;
}

flex-wrap

Flexコンテナーの内容の横幅の合計値が、Flexコンテナー自体の横幅を超過する場合の折り返しの方法を指定します。

cssファイル
.flex {
  display: flex;
  flex-wrap: wrap;
}

flex-flow

flex-directionとflex-wrapをまとめて指定します。

cssファイル
.flex {
  display: flex;
  flex-flow: row wrap;
}

justify-content

Flexコンテナーの内容の横方向の整列方法を指定できます。

cssファイル
.flex {
  display: flex;
  justify-content: flex-start;
}

align-items

Flexコンテナーの内容の縦方向の整列方法を指定できます。 基本的には、内容が1行の場合に使用します。内容が複数行になる場合は、1行ごとにそれぞれ整列されます。

cssファイル
.flex {
  display: flex;
  align-items: center;
}

align-content

Flexコンテナーの内容が複数行になった際の整列方法を指定できます。 内容が1行しかない場合は効果がありません。

cssファイル
.flex {
  display: flex;
  align-content: flex-end;
}

Flexアイテムで指定できるプロパティ

order

Flexアイテムの順序を指定できます。

cssファイル
.flex > div:nth-child(1) {
  order: 3;
}
.flex > div:nth-child(2) {
  order: 4;
}
.flex > div:nth-child(3) {
  order: 1;
}
.flex > div:nth-child(4) {
  order: 2;
}

flex-grow

Flexアイテムの横幅の伸びる比率を指定できます。

具体的には、Flexコンテナーの横幅に余白がある場合（Flexアイテムの横幅の合計値がFlexコンテナー自体の横幅に満たない場合）、flex-growが指定されているアイテムの横幅余白を埋めるように伸びます。
指定されているアイテムが複数ある場合、その数値の比率に従って伸びます。1つもなければ、横幅は変わらず、余白も埋められません。

cssファイル
.flex > div:nth-child(1) {
  flex-grow: 0;
}
.flex > div:nth-child(2) {
  flex-grow: 1;
}
.flex > div:nth-child(3) {
  flex-grow: 2;
}
.flex > div:nth-child(4) {
  flex-grow: 3;
}

よく使うFlexboxの設定

最初の要素だけ左揃えで、それ以外は右揃えで横に並べる場合が多くありますので例で記述しておきます。

cssファイル
.flex {
  display: flex;
  justify-content: flex-end;
}
.flex > :first-child {
  margin-right: auto;
}

まとめ

なんとなくで使用していたflexレイアウトについてまとめました！
Flexコンテナー、Flexアイテムを意識して記述した内容がきちんと反映されるかどうか把握しながら実装しないといけないと思いました。
少しずつ慣れていきたいと思います。

Discussion