2025-02-03T13:25:31

docs/07_Flexbox.md

@@ -1,8 +1,210 @@
 # Flexbox
+Flexbox(플렉스박스)는 요소를 효율적으로 정렬하고 배치하는 강력한 레이아웃 시스템이야.
+> 가로, 세로 정렬을 쉽게 제어하고, 반응형 디자인에 유용!
+
+| 부모 속성 | 설명 | 옵션 |
+|---|---|---|
+| flex-direction | 주축 방향 설정 | row, row-reverse, column, column-reverse |
+| justify-content | 주축 방향에서 아이템 정렬 | flex-start, flex-end, center, space-between, space-around, space-evenly |
+| align-items | 교차축 방향에서 아이템 정렬 | flex-start, flex-end, center, stretch, baseline |
+| align-content | 여러 줄 정렬 | flex-start, flex-end, center, space-between, space-around, stretch |
+| flex-wrap | 자동 줄바꿈 | nowrap, wrap, wrap-reverse |
+| flex-flow | = flex-direction + flex-wrap |
+
+| 자식 속성 | 설명 | 옵션 |
+|---|---|---|
+| flex | = flex-grow + flex-shrink + flex-basis |
+| flex-grow | 남은 공간 비율 |
+| flex-shrink | 축소 비율 |
+| flex-basis | 기본 크기 | auto |
+| align-self | 개별적 아이템 정렬 | auto, flex-start, flex-end, center, baseline, stretch |
+| order | 순서 변경 |
+
+
+## Flexbox 개념 및 기본 구조
+Flexbox는 **부모 요소(flex container)와 자식 요소(flex items)**로 구성돼.
+```css
+.container {
+  display: flex;
+} /* .container 내부의 모든 자식 요소가 Flex 아이템이 되어 정렬됨. */
+```
+
+요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.
+* 주축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다. 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
+* 교차축 (cross axis) 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.
+* `display: flex`이 설정된 부모 요소를 일컬어 플렉스 컨테이너 (flex container) 라고 합니다.
+* 플렉스 컨테이너 내부에 flexbox로 레이아웃되는 항목을 일컬어 플렉스 아이템 (flex items) 이라고 합니다.
+
+### display: flex 기본 효과
+* flex를 적용한 요소의 자식 요소(flex items)가 한 줄에 정렬됨
+* 자식 요소의 width는 자동으로 콘텐츠 크기에 맞게 조정됨
+* 기본적으로 가로 방향(row) 정렬. inline 요소도 블록처럼 배치됨
+```css
+.container {
+  display: flex;
+  background-color: lightgray;
+}
+.item {
+  width: 100px;
+  height: 50px;
+  background-color: skyblue;
+  margin: 5px;
+}
+```
+```html
+<div class="container">
+  <div class="item">1</div>
+  <div class="item">2</div>
+  <div class="item">3</div>
+</div>
+```
+
+## 부모 요소(.container) 속성
+Flexbox 컨테이너(부모 요소)에서 레이아웃을 조정할 수 있는 주요 속성들!
+
+### flex-direction
+주축(main axis) 방향을 설정
+* row :	기본값 (왼쪽 → 오른쪽 정렬)
+* row-reverse :	오른쪽 → 왼쪽 정렬
+* column :	위 → 아래 정렬
+* column-reverse :	아래 → 위 정렬
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+} /* 아이템이 세로 방향으로 정렬됨! */
+```
+
+### justify-content
+주축(main axis) 방향에서 아이템 정렬 방식
+* flex-start :	왼쪽 정렬 (기본값)
+* flex-end :	오른쪽 정렬
+* center :	가운데 정렬
+* space-between :	양끝 정렬 (사이 간격 자동)
+* space-around :	요소 주변 간격 동일
+* space-evenly :	요소 간 간격 동일
+```css
+.container {
+  display: flex;
+  justify-content: center;
+} /* 아이템이 가로 방향으로 가운데 정렬됨! */
+```
+
+### align-items
+교차축(cross axis) 방향에서 아이템 정렬 방식
+* flex-start :	위쪽 정렬
+* flex-end :	아래쪽 정렬
+* center :	세로 중앙 정렬
+* stretch :	높이를 컨테이너에 맞게 늘림 (기본값)
+* baseline :	텍스트 기준선에 맞춤
+```css
+.container {
+  display: flex;
+  align-items: center;
+}
+```
+
+### align-content
+여러 줄의 아이템 정렬 방식 (flex-wrap: wrap 필요)
+* flex-start :	위쪽 정렬
+* flex-end :	아래쪽 정렬
+* center :	가운데 정렬
+* space-between :	위아래 간격 동일
+* space-around :	요소 주변 간격 동일
+* stretch :	전체 높이를 채움
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+}
+```
+
+### flex-wrap
+flex-wrap 속성은 Flexbox 컨테이너 안의 아이템이 한 줄에 배치될지, 여러 줄로 나눠질지를 결정하는 속성이야.
+> 기본적으로 flex는 한 줄(nowrap)에 모든 아이템을 배치하지만, flex-wrap을 설정하면 자동 줄바꿈이 가능!
+* nowrap :	한 줄에 모든 아이템을 배치 (기본값)
+* wrap :	자동으로 줄바꿈하여 여러 줄로 배치
+* wrap-reverse :	줄바꿈 + 아이템의 줄 순서를 반대로 배치
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap;
+} /* 아이템이 컨테이너 너비를 초과하면 다음 줄로 이동! */
+```
+
+## 자식 요소(.item) 속성
+각 개별 아이템(flex items)에 적용하는 속성들!
+
+### flex-grow
+컨테이너의 남은 공간을 어떻게 나눌지 설정
+* 0 :	기본값 (남은 공간을 차지하지 않음)
+* 1 :	동일한 비율로 남은 공간을 나눠 가짐
+* 2 이상 :	비율을 설정하여 공간 차지
+```css
+.item:first-child {
+  flex-grow: 2; /* 첫 번째 아이템이 두 배 크기 */
+}
+.item {
+  flex-grow: 1;
+}
+```
+
+### flex-shrink
+공간이 부족할 때 크기가 줄어드는 비율
+* 0 :	크기를 줄이지 않음
+* 1 :	기본값 (동일한 비율로 축소)
+* 2 이상 :	더 많이 줄어듦
+```css
+.item:first-child {
+  flex-shrink: 2; /* 첫 번째 아이템이 두 배 더 줄어듦 */
+}
+```
+
+### flex-basis
+요소의 기본 크기를 지정
+* auto :	내용 크기에 따라 자동 설정
+* px, % :	고정 크기 지정
+```css
+.item {
+  flex-basis: 200px;
+}
+```
+
+### align-self 
+align-self는 개별 그리드(Grid) 또는 플렉스(Flexbox) 아이템의 세로 정렬을 조정하는 속성이야.
+
+> align-items가 컨테이너 내부의 모든 아이템을 정렬하는 반면,
+align-self는 특정 아이템 하나만 개별적으로 정렬 가능!
+
+* auto :	부모(align-items) 설정을 따름 (기본값)
+* flex-start :	위쪽 정렬
+* flex-end :	아래쪽 정렬
+* center :	세로 중앙 정렬
+* baseline :	텍스트 기준선에 맞춤
+* stretch :	컨테이너 높이에 맞게 늘어남 (기본값)
+
+```css
+.container {
+  display: flex;
+  align-items: center; /* 모든 아이템을 세로 중앙 정렬 */
+}
+.item:nth-child(2) {
+  align-self: flex-start; /* 두 번째 아이템만 위쪽 정렬 */
+}
+```
+
+### order
+아이템의 정렬 순서를 변경
+* 0 :	기본값 (HTML 순서대로)
+* 1, 2, 3 :	숫자가 클수록 뒤로 이동
+* -1 :	앞으로 이동
+```css
+.item:nth-child(2) {
+  order: -1; /* 두 번째 아이템을 맨 앞으로 이동 */
+}
+```
+
+
 
-* display: flex
-* flex-direction
-* justify-content
-* align-items
-* flex-wrap
-* flex-grow, flex-shrink, flex-basis