ゲームで学ぶflexbox!
https://flexboxfroggy.com/#ko

Summary

justify-content

flex-start:コンテナの左側に要素を配置します.

flex-end:エレメントをコンテナの右側に並べます.

center:要素をコンテナの中心に配置します.

space-エレメント間で同じ間隔を保ちます.

space-aund:要素の周囲に同じ間隔を保つ.

align-items

flex-start:コンテナの上部に要素を配置します.

flex-end:エレメントをコンテナの下部に配置します.

center:エレメントをコンテナの垂直線の中心に配置します.

ベースライン:エレメントをコンテナの開始位置に位置合わせします.

stretch:コンテナに要素を追加します.

flex-direction

row:要素をテキストの方向に揃えます.(左->右)

row-逆:要素をテキストに逆揃えします.(右->左)

列:要素を上から下に並べます.

-要素を下から上へ並べ替えます.(下→上)

flex-wrap

nowrap:すべての要素を1行に並べます.(改行不可)

wrap:複数行に要素を配置します.(改行を許可)

wrap-reverse:要素を複数行で逆揃えします.(改行を許可)

flex-flow

flex-directionとflex-wrapオプションは同時に

を使用します.

align-content

flex-start:複数の行をコンテナの上部に揃えます.

flex-end:複数行をコンテナの下部に配置します.

center:複数の直線を中央に揃えます.

space-複数行の間で同じ間隔を維持します.

space-aund:複数行の周囲に同じ間隔を保つ.

stretch:複数の線をコンテナに拡張します.

ステップ1

左に移動

justify-content: flex-end;

ステップ2

中央揃え

justify-content: center;

手順3

エレメントの周囲の同じ間隔(各エレメントの左右のスペースサイズが同じ)

justify-content: space-around;

手順4

エレメント間の同じ間隔(エレメント間の間隔が同じ)

justify-content:space-between;

手順5

下揃え

align-items: flex-end;

ステップ6

水平方向と垂直方向の中央揃え

justify-content: center;
align-items: center;

ステップ7

エレメントの周囲に等間隔、下部に位置合わせ

justify-content: space-around;
align-items: flex-end;

ステップ8

左->右揃え

flex-direction: row-reverse;

ステップ9

縦揃え(上->下)

flex-direction: column;

ステップ10

左->右に反転し、flex-startではなくflex-endを右に揃えます.

flex-direction: row-reverse;
justify-content: flex-end;

ステップ11

垂直位置揃え、下へ移動

flex-direction: column;
justify-content: flex-end;

ステップ12

垂直方向に反転し、要素間の間隔を同じにします.

flex-direction: column-reverse;
justify-content: space-between;

ステップ13

flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;

ステップ14

order: 1;

전체코드

#pond {
  display: flex;
}

.yellow {
  order: 1;
}

ステップ15

order: -1;

전체코드 

#pond {
  display: flex;
}

.red {
  order: ;
}

ステップ16

黄色いカエルしか残っていません

align-self: flex-end;

전체코드 

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

.yellow {
  align-self: flex-end;
}

ステップ17

order: 1;
align-self: flex-end;

전체코드 

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

.yellow {
  order: 1;
  align-self: flex-end;
}

ステップ18

改行を許可

flex-wrap: wrap;

ステップ19

縦揃え、改行可能

flex-direction: column;
flex-wrap: wrap;

ステップ20

flex-flow: column wrap;

ステップ21

上揃え

align-content: flex-start;

ステップ22

下揃え

align-content: flex-end;

ステップ23

flex-direction: column-reverse;
align-content: center;

ステップ24

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content:space-between;
justify-content: center;