플렉스 Container

01.display

• Flex Container의 화면 출력(보여짐)의 특성
• flex: 부모 요소에 포함된 모든 자식요소들이 수평 정렬
• inline-flex: 부모 요소가 수평 정렬

1-1.display:flex 속성

• 이처럼 수직으로 쌓이는것이 일반적인 블록 구조이다.

• 하지만 부모 요소 스타일에 dlsplay:flex; 속성을 지정해주면 자식 요소들이 알아서 수평 정렬 되는 것을 확인 할 수 있다.
• 부모 요소: 블록 정렬
• 자식 요소: 인라인 정렬

1-2.display:inline-flex 속성

• display: inline-flex로 설정하면 부모 요소들도 수평정렬 되는 것을 확인 할 수 있다.
• 부모 요소: 인라인 정렬
• 자식 요소: 인라인 정렬

---

02.flex-direction

• 주 축을 설정(수평 정렬 / 수직 정렬 선택)
• row: 행 축(좌→우)
• row-reverse: 행 축(우→좌)
• column: 열 축(위→아래)
• column-reverse: 열 축(아래→위)

2-1.수평 정렬

• flex-direction: row (좌→우)

• flex-direction: row-reverse (우→좌)

2-2.수직 정렬

• flex-direction: column (위→아래)

• flex-direction: column-reverse (아래→위)

---

03.flex-wrap

• Flex Items 묶음(줄 바꿈) 여부
• nowrap: 묶음(줄 바꿈) 없음
• wrap: 여러 줄로 묶음
• wrap-reverse: wrap의 반대 방향으로 묶음

• 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성입니다.
• 기본적으로 display: flex는 모든 자식 요소들을 수평 정렬 하려고 하는데 이때 자식 요소들의 기본 사이즈 값이 변하는 것을 막기 위해 여러 줄로 묶어줍니다.

3-1.flex-wrap: no-wrap 묶음(줄 바꿈) 없음

3-2.flex-wrap: wrap 여러 줄로 묶음

3-3.flex-wrap: wrap-reverse wrap의 반대 방향으로 묶음

---

04.justify-content

• 주 축의 정렬 방법
• flex-start: Flex Item를 시작점으로 정렬 (기본값)
• flex-end: Flex Items를 끝점으로 정렬
• center: Flex Items를 가운데 정렬
• space-between: 각 Flex Item 사이를 균등하게 정렬
• space-around: 각 Flex Item의 외부 여백을 균등하게 정렬

4-1.flex-start: Flex Item를 시작점으로 정렬 (기본값)

4-2.flex-center: Flex Item을 가운데 정렬

4-3.flex-end: Flex Item을 끝점으로 정렬

---

05.align-content

• 교차 축의 여러 줄 정렬 방법
• flex-start: Flex Items를 시작점으로 정렬
• flex-end: Flex Items를 끝점으로 정렬
• center: Flex Items를 가운데 정렬
• space-between: 각 Flex Item 사이를 균등하게 정렬
• space-around: 각 Flex Item의 외부 여백을 균등하게 정렬

• 대부분 수직 정렬할 때 많이 사용된다.
• items들이 한줄이 아닌 두줄 이상이어야 한다.
• flex-wrap: wrap으로 설정되어 있어야되며 정렬 가능한 여백이 있어야지만 정상 동작이 가능하다.

5-1.flex-start: Flex Items를 시작점으로 정렬

5-2.center: Flex Items를 가운데 정렬

5-3.flex-end: Flex Items를 끝점으로 정렬

---

06.align-items

• 교차 축의 한 줄 정렬 방법
• stretch: Flex Items를 교차 축으로 늘림
• flex-start: Flex Items를 각 줄의 시작점으로 정렬
• flex-end: Flex Items를 각 줄의 끝점으로 정렬
• center: Flex Items를 각 줄의 가운데 정렬
• baseline: Flex Items를 각 줄의 문자 기준선에 정렬

6-1.flex-start: Flex Items를 각 줄의 시작점으로 정렬

6-2.center: Flex Items를 각 줄의 가운데 정렬

6-3.flex-end: Flex Items를 각 줄의 끝점으로 정렬