Flex

★ Flex Container

display: flex; /* block */

display: inline-flex; /* inline-flex */

 

☆ flex-direction (주 축 방향 설정)

flex-direction: row; /* 기본값: 가로 방향 왼쪽 → 오른쪽 (가로 정렬)*/

flex-direction: row-reverse; /*오른쪽 → 왼쪽 (가로 반전)*/

flex-direction: column ; /*위 → 아래 (세로 정렬)*/

flex-direction: column-reverse /*아래 → 위 (세로 반전)*/

☆ flex-wrap (줄 바꿈 설정)

flex-wrap: nowrap; /* (기본값) 한 줄 유지 */

flex-wrap: wrap; /* 복수행 배치 */

flex-wrap: wrap-reverse; /* 줄 바꿈을 거꾸로 적용 */

 

◆ flex-flow : flex-direction 속성과 flex-wrap 속성을 합침

※ 첫 번째 값은 flex-direction이고 두 번째 값은 flex-wrap

flex-flow: row wrap;

 

☆ justify-content (주 축 정렬)- 가로축(main axis)에서 아이템들을 정렬

justify-content:flex-start; /*(기본값) 왼쪽 정렬 */

justify-content:flex-end; /*오른쪽 정렬 */

justify-content:center; /*중앙 정렬 */

justify-content:space-between; /*양쪽 끝 배치, 나머지 균등 배치 */

justify-content:space-around; /*각 아이템의 양쪽에 동일한 여백 추가 */

justify-content:space-evenly; /*모든 여백을 균등하게 배치 */

 

☆ align-items (교차 축 정렬) - 세로축(cross axis)에서 아이템들을 정렬

align-items: stretch; /* (기본값) 높이를 컨테이너에 맞춤 */

align-items: flex-start; /* 위쪽 정렬 */

align-items: flex-end; /* 아래쪽 정렬 */

align-items: center; /* 세로 중앙 정렬 */

align-items: baseline; /* 텍스트 기준선 정렬 */

 

☆ align-content (여러 줄 정렬, flex-wrap과 함께 사용)

※ flex-wrap: wrap; 상태에서만 효과 있음 */

align-content: stretch; /* (기본값) 행의 높이를 컨테이너에 맞춤 */

align-content: flex-start; /* 위쪽 정렬 */

align-content: flex-end; /* 아래쪽 정렬 */

align-content: center; /* 중앙 정렬 */

align-content: space-between; /* 첫 행은 위, 마지막 행은 아래, 나머지는 균등 정렬 */

align-content: space-around; /* 각 행의 위아래 여백을 균등 배치 */

---

● Flex Item(자식 요소) 속성

○ flex-grow (확장 비율) : 컨테이너가 커질 때 각 아이템이 차지하는 비율

flex-grow: 1; /* 동일한 비율로 크기 조정 */

 

○ flex-shrink (축소 비율) : 컨테이너가 작아질 때 각 아이템의 축소 비율

flex-shrink: 0; /* 줄어들지 않음 */

 

○ flex-basis (기본 크기) : 아이템의 기본 크기

flex-basis: 200px; /* 기본 너비 200px */

 

○ align-self (개별 아이템 정렬) : 개별 아이템에 대해 align-items를 덮어씀

align-self: center; /* 해당 아이템만 세로 중앙 정렬 */

※ 대상: 특정 flex 아이템(개별 요소)
※ 작동 방식: 부모 컨테이너의 align-items 속성을 무시하고 개별적으로 정렬

◆ flex는 flex-grow, flex-shrink, flex-basis의 단축 속성

ex ) flex: 1 1 100px;

---

◆ align-items, align-content, align-self 차이점

※ [Flex Container] align-items: 개별 아이템이 한 줄 안에서 정렬
※ [Flex Container] align-content: 여러 줄이 있는 경우 행 단위로 정렬
※ [Flex Item] align-self : 부모 컨테이너의 align-items 속성을 무시하고 개별적으로 정렬