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

7350 ワード
HTML 初心者 CSS flexbox HTML テキストリンク

はじめに

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

学習方法

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;
}
MySQL 5.7レプリケーション遅延sync_relay_log
SEQUENCEの値の再構築