CSS Flexbox Froggy

🔍 CSS Flexbox?

웹 페이지의 레이아웃을 설계하기 위한 한 방법으로, 요소들 사이의 공간 분배와 정렬을 용이하게 하기 위해 사용한다.
특히 반응형 디자인을 구현할 때 유용하며, 여러 화면 크기와 디스플레이 유형에 걸쳐 일관된 레이아웃을 제공한다.

---

🐸 Flexbox Container

Flex Item 들을 감싸기 위한 부모 요소

• display
• flex-direction
• justify-content
• align-items
• flex-wrap

🐸 Flex box Item

Flex Container 내부에 있는 모든 직접적인 자식 요소들에 해당하며 Container 설정에 따라 자동으로 정렬

• flex-grow
• flex-shrink
• flex-basis
• align-self

---

🐸 CSS Flexbox Froggy Solution

flex froggy link

🐣 justify-content

mdn justify-content

🐸 Quiz 1

justify-content: flex-end; # 오른쪽으로 배치

🐸 Quiz 2

justify-content: center; # 가운데 배치

🐸 Quiz 3

justify-content: space-around; # 요소들을 고르게 배분 + 시작과 끝 간격은 각 요소 사이 간격의 절반

🐸 Quiz 4

justify-content: space-between; # 요소들을 고르게 배분 + 첫 번째 요소는 시작 지점과 붙고 마지막 요소는 끝 지점과 붙음

---

🐣 align-items

mdn align-items

🐸 Quiz 5

align-items: flex-end; # 요소들을 컨테이너 바닥으로 배치

🐸 Quiz 6

justify-content: center; 요소들을 가운데 배치
align-items: center; 요소들을 가운데 배치

🐸 Quiz 7

justify-content: space-around; 요소들을 고르게 배분 + 시작과 끝의 간격은 각 요소 사이 간격의 절반
align-items: flex-end; 요소들을 바닥으로 배치

---

🐥 justify-content vs align-items

justify-content 속성은 Flex Container의 main axis를 따라 요소 정렬, 주로 가로 정렬

align-items 속성은 Flex Container의 cross axis를 따라 요소 정렬, 주로 세로 정렬

단, flex-direction에 따라 main axis와 cross axis는 바뀔 수 있다.

---

🐣 flex-direction

mdn flex-direction

🐸 Quiz 8

flex-direction: row-reverse; # 요소들을 텍스트의 반대 방향으로 정렬

🐸 Quiz 9

flex-direction: column; # 요소들을 위에서 아래로 정렬

🐸 Quiz 10

flex-direction: row-reverse; # 요소들을 row 방향으로 정렬 + 역방향
justify-content: left; # 요소들을 왼쪽으로 배치

🐸 Quiz 11

flex-direction: column; # 요소들을 위에서 아래로 정렬
justify-content: flex-end; # 요소들을 바닥으로 배치

🐸 Quiz 12

flex-direction: column-reverse; # 요소들을 위에서 아래로 정렬 + 역방향
justify-content: space-between; # 요소들을 고르게 배분 + 첫 번째 요소는 시작 지점과 붙고 마지막 요소는 끝 지점과 붙음

🐸 Quiz 13

flex-direction: row-reverse; # 요소들을 row 방향으로 정렬 + 역방향
justify-content: center; # 요소들을 가운데 배치
align-items: flex-end; 요소들을 바닥으로 배치

---

🐣 order

mdn order

flex 또는 grid container 안에서 현재 요소의 배치 순서를 지정, default = 0

🐸 Quiz 14

.yellow{
	order: 1; # 해당 요소를 마지막으로 배치
}

🐸 Quiz 15

.red{
	order: -1; # 해당 요소를 첫번째로 배치
}

---

🐣 align-self

mdn align-self

🐸 Quiz 16

.yellow{
	align-self: end; # 해당 요소 바닥에 배치
}

🐸 Quiz 17

.yellow{
	order:1; # 해당 요소 마지막 순서 배치
	align-self: flex-end; # 해당 요소 바닥에 배치
}

---

🐣 flex-wrap

mdn flex-wrap

🐸 Quiz 18

flex-wrap: wrap; # 요소들을 여러 줄에 걸쳐 정렬

🐸 Quiz 19

flex-direction: column; # 요소들을 위에서 아래로 정렬
flex-wrap: wrap; # 요소들을 여러 줄에 걸쳐 정렬

---

🐣 flex-flow

mdn flew-flow

flex-direction과 flex-wrap을 하나의 단축 속성으로 결합

🐸 Quiz 20

flex-flow: column wrap; # 요소들을 위에서 아래로 정렬 + 요소들을 여러 줄에 걸쳐 정렬

---

🐸 Quiz 21

flex-wrap: wrap; # 요소들을 여러 줄에 걸쳐 정렬
align-content: flex-start; # 요소들을 상단에 배치

🐸 Quiz 22

flex-wrap: wrap; # 요소들을 여러 줄에 걸쳐 정렬
align-content: flex-end; # 요소들을 바닥에 배치

🐸 Quiz 23

flex-wrap: wrap; # 요소들을 여러 줄에 걸쳐 정렬
flex-direction: column-reverse; 요소들을 위에서 아래로 정렬 + 역방향
align-content: center; # 요소들을 바닥에 배치

🐸 Quiz 24

flex-flow: column-reverse wrap-reverse; # 요소들을 위에서 아래로 정렬 + 역방향, 요소들을 여러 줄에 걸쳐 정렬 + 역방향
justify-content: center; 요소들을 가운데 배치
align-content: space-between;  # 요소들을 고르게 배분 + 첫 번째 요소는 시작 지점과 붙고 마지막 요소는 끝 지점과 붙음