【CSS】フレックスボックス (flexbox) の使い方

はじめに

フレックスボックスの学習備忘録です。

学習方法

FLEXBOX FROGGYは、ゲーム形式にフレックスボックスを楽しく学べます。
FLEXBOX FROGGYを最後まで行うと下記のスタイルがわかるようになります。

Q24

# pond {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-content: space-between;
}

フレックスボックスのまとめ

justify-content: 横方向に移動する

* flex-start: アイテムはコンテナーの左側に並びます
* flex-end: アイテムはコンテナーの右側に並びます
* center: アイテムはコンテナーの中央に並びます
* space-between: アイテムはその間に等しい間隔を空けて表示されます
* space-around: アイテムはその周囲に等しい間隔を空けて表示されます
* space-around: 周辺に等しいスペースを空ける
* space-between: 間に対して均等にスペースを空ける

justify-contentの例

# pond {
  display: flex;
  justify-content: flex-end;
}

align-items : 縦方向に移動する

* flex-start: アイテムはコンテナーの上部に並びます。
* flex-end: アイテムはコンテナーの下部に並びます。
* center: アイテムはコンテナーの垂直方向中央に並びます。
* baseline: アイテムはコンテナーのベースラインに表示されます。
* stretch: アイテムはコンテナーの大きさに合うよう広がります。

align-itemsの例

# pond {
  display: flex;
  justify-content: center;
  align-items:center;
}

flex-direction : 軸の方向を変える

• row: アイテムは文章と同じ方向に配置されます。
• row-reverse: アイテムは文章と逆の方向に配置されます。
• column: アイテムは上から下に向かって配置されます。
• column-reverse: アイテムは下から上に向かって配置されます。

order : アイテムの順序を指定する

• アイテムはデフォルトでは0の値を取ります。
• １以上は右へ移動します。
• 左に置きたい場合は-1以下を指定します。

orderの例

# pond {
  display: flex;
}

.yellow {
order: 1
}

align-self :　個別のアイテムへ設定できるプロパティー

align-selfの例

# pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
align-self:flex-end
}

flex-wrap: アイテムを強制的に１行にまとめるか、改行させるか制御する

• nowrap: 全てのアイテムは、ひとつの行にフィットします。
• wrap: アイテムは他の行へ折り返します。
• wrap-reverse: アイテムは逆順になって他の行へ折り返します

flex-wrapの例

# pond {
  display: flex;
  flex-wrap: wrap;
}

• flex-directionとflex-wrapの二つのプロパティーはよく一緒に使われるため、これらを統合するショートハンドプロパティーflex-flowが作られました。
• このショートハンドプロパティーは空白文字で分割した二つのプロパティーの値を受け付けます。

flex-directionとflex-wrapを２つを省略できるよ

# pond {
  display: flex;
  flex-flow: column wrap
}

align-content: 複数の行が他の行とどう距離を取り広がるのかを指定する

• flex-start: 行はコンテナーの上側に詰められます。
• flex-end: 行はコンテナーの下側に詰められます。
• center: 行はコンテナーの中央に詰められます。
• space-between: 行はその間に等しい間隔を空けて表示されます。
• space-around: 行はその周囲に等しい間隔を空けて表示されます。
• stretch: 行はコンテナーに合うよう引き延ばされます。

align-contentの例

# pond {
  display: flex;
  flex-wrap: wrap;
  align-content:flex-start;
}