2024-06-13

Writerside/topics/Flexbox.md

@@ -10,7 +10,31 @@ div {
 ```
 
 요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.
-* 기본 축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다(예: 페이지를 가로지르는 행 또는 페이지 밑으로 쌓이는 열). 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
+
+![Flex](CSS_Flex.svg)
+
+* 주축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다. 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
 * 교차축 (cross axis) 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.
-* display: flex이 설정된 부모 요소(우리 예제에서 <section>이 해당)를 일컬어 flex container (flex container) 라고 합니다.
-* flex container 내부에 flexbox로 레이아웃되는 항목을 일컬어 flex item (flex items) 이라고 합니다(우리 예제에서 <article> 요소가 해당됩니다).
+* `display: flex`이 설정된 부모 요소를 일컬어 플렉스 컨테이너 (flex container) 라고 합니다.
+* 플렉스 컨테이너 내부에 flexbox로 레이아웃되는 항목을 일컬어 플렉스 아이템 (flex items) 이라고 합니다.
+
+## 플렉스 컨테이너
+
+* `flex-direction` : 주축의 방향을 지정합니다.
+  * row | row-reverse | column | column-reverse
+* `flex-wrap` : 플렉스 아이템 요소들이 영역을 벗어났을 때, 줄 바꿈할지 여부를 지정합니다.
+  * wrap | nowrap | wrap-reverse
+* `flex-flow` = `flex-direction` + `flex-wrap`
+* `align-items` : 모든 직계 자식에 대한 정렬 방식을 지정합니다.
+  * normal | flex-start | flex-end | center | start | end | self-start | self-end | baseline | stretch | safe | unsafe
+* `justify-content` : 주축을 기준으로 플렉스 아이템을 어떻게 정렬할 것인지를 지정합니다.
+  * start | end | flex-start | flex-end | center | left | right | normal | baseline | space-between | space-around | space-evenly | stretch | safe | unsafe
+
+## 플랙스 아이템
+
+* `flex` = `flex-grow` + `flex-shrink` + `flex-basis`
+* `flex-grow` : 플레스 컨테이너 내부에서 할당 가능한 공간의 정도를 비례값으로 지정합니다.
+* `flex-shrink` : 플레스 컨테이너 내부에서 크기가 넘칠 때, 얼마만큼 공간을 줄이지를 비례값으로 지정합니다.
+* `flex-basis` : 플렉스 아이템의 초기 크기를 지정합니다.
+* `align-self` : 각각의 플렉스 아이템에 대한 정렬 방식을 개별적으로 지정합니다.
+* `order` : 플렉스 아이템의 순서를 지정합니다. 기본값은 0입니다. 낮은 순위의 아이템이 먼저 표시됩니다.