[CSS] Flexbox Froggy - flex 속성을 배워보자

display: flex;

justify-content

• flex-start : 요소들을 컨테이너의 왼쪽으로 정렬 (start -> flex-start로 변경됨)
• flex-end : 요소들을 컨테이너의 오른쪽으로 정렬 (end -> flex-end로 변경됨)
• center : 요소들을 컨테이너의 가운데로 정렬
• space-between : 요소들 사이 동일 간격으로 두기
• space-around : 요소들 주위에 동일한 간격으로 두기

align-items

• flex-start : 요소들을 컨테이너의 꼭대기로 정렬
• flex-end : 요소들을 컨테이너의 바닥으로 정렬
• center : 요소들을 컨테이너의 세로선 상 가운데로 정렬
• baseline : 요소들을 컨테이너 시작 위치에 정렬
• stretch : 요소들을 컨테이너에 맞도록 늘리기

flex-direction

• row : 요소들을 텍스트의 방향과 동일하게 정렬
• row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
• column : 요소들을 위에서 아래로 정렬
• column-reverse : 요소들을 아래에서 위로 정렬

order

• default value: 0
• 각 요소에 음수/양수를 주어 순서를 변경할 수 있음

align-self

• 개별 요소에 적용할 수 있는 또 다른 속성
• align-items와 동일한 값들을 지정한 요소에만 적용할 수 있음

flex-wrap

• nowrap : 모든 요소들을 한 줄에 정렬
• wrap : 요소들을 여러 줄에 걸쳐 정렬
• wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬

flex-flow

flex-flow: flex-direction flex-wrap;

• flex-direction과 flex-wrap를 줄여서 함께 사용 가능 (자주 같이 사용되기 때문)
• (ex) flex-flow: column wraps;

align-content

• flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬
• flex-end : 여러 줄들을 컨테이너의 바닥에 정렬
• center : 여러 줄들을 세로선 상의 가운데에 정렬
• space-between : 여러 줄들 사이 동일 간격으로 둠
• space-around : 여러 줄 주위에 동일한 간격으로 둠
• stretch : 여러 줄들을 컨테이너에 맞도록 늘림

 

Answer

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-direction: row-reverse;
    justify-content: flex-end;
11. flex-direction: column;
    justify-content: 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;
15. order: -1;
16. align-self: flex-end;
17. 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;
    justify-content: center;
    align-content: space-between;

예~ 모든 개구리들을 수련 위에 안전하게 이동했다!