🐸FLEXBOX FROGGY🐸

🐸

예전에 CSS공부할 때에도 한번 해봤지만 오랜만에 다시 공부하는김에 해봤다.

이와는 별개로 그림으로 한번에 알 수 있는 사이트도 첨부해놓고 필요할때 다시참고해야겠다.

---

• STAGE 1

  justify-content: flex-end;

• STAGE 2

  justify-content: center;

• STAGE 3

  justify-content: space-around;

• STAGE 4

  justify-content:  space-between;

• STAGE 5

  align-items: flex-end;

• STAGE 6

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

• STAGE 7

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

• STAGE 8

  flex-direction: row-reverse;

• STAGE 9

  flex-direction: column;

• STAGE 10

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

Notice that when you set the direction to a reversed row or column, start and end are also reversed.

• STAGE 11

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

• STAGE 12

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

• STAGE 13

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

• STAGE 14

  order: 1;

• STAGE 15

  order: -3;

• STAGE 16

  align-self: flex-end;

• STAGE 17

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

• STAGE 18

  flex-wrap: wrap

• STAGE 19

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

• STAGE 20

  flex-flow: column wrap;

• STAGE 21

  align-content: flex-start;

• STAGE 22

  align-content: flex-end;

• STAGE 23

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

• STAGE 24

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