CSS 속성(Properties) - 플렉스(정렬)

플렉스(정렬)

• 1차원 레이아웃

 

Flex Container

• display: flex;가 부여된 요소

📍 속성

display

• Flex Container의 화면 출력(보여짐) 특성
• 값
  • flex: 블록 요소와 같이 Flex Container 정의
  • inline-flex: 인라인 요소와 같이 Flex Container 정의

 

flex-direction

• 주 축을 설정
• 값
  • row [기본 값] : 행 축(좌 → 우)
  • row-reverse: 행 축(우 → 좌)
  • column: 열 축(위 → 아래)
  • column-reverse: 열 축(아래 → 위)

 

flex-wrap

• Flex Items 묶음(줄 바꿈) 여부
• 값
  • nowrap [기본 값] : 묶음(줄 바꿈) 없음
  • wrap: 여러 줄로 묶음

 

justify-content

• 주 축의 정렬 방법
• 값
  • flex-start [기본 값] : Flex Items를 시작점으로 정렬(수평: 왼쪽 정렬, 수직: 위쪽 정렬)
  • flex-end: Flex Items를 끝점으로 정렬(수평: 오른쪽 정렬, 수직: 아래쪽 정렬)
  • center: Flex Items를 가운데 정렬(수평: 수평 가운데, 수직: 수직 가운데)
  • space-between: 각 Flex Item 사이를 균등하게 정렬
  • space-around: 각 Flex Item 외부 여백을 균등하게 정렬

 

align-content

• 교차 축의 여러 줄 정렬 방법
• 아이템이 두 줄 이상, 줄 바꿈 상태(flex: wrap;)여야 하고 정렬이 가능한 빈 공간이 있어야 동작
• 값
  • stretch [기본 값] : Flex Items를 시작점으로 정렬(수평: 위쪽 정렬, 수직: 왼쪽 정렬)
  • flex-start: Flex Items를 시작점으로 정렬(수평: 위쪽 정렬, 수직: 왼쪽 정렬)
  • flex-end: Flex Items를 끝점으로 정렬(수평: 아래쪽 정렬, 수직: 오른쪽 정렬)
  • center: Flex Items를 가운데 정렬 (수평: 수직 가운데, 수직: 수평 가운데)
  • space-between: 각 Flex Item 사이를 균등하게 정렬
  • space-around: 각 Flex Item 외부 여백을 균등하게 정렬

 

align-items

• 교차 축의 한 줄 정렬 방법
• 값
  • stretch [기본 값] : Flex Items를 시작점으로 정렬(수평: 위쪽 정렬, 수직: 왼쪽 정렬)
  • flex-start: Flex Items를 시작점으로 정렬(수평: 위쪽 정렬, 수직: 왼쪽 정렬)
  • flex-end: Flex Items를 끝점으로 정렬(수평: 아래쪽 정렬, 수직: 오른쪽 정렬)
  • center: Flex Items를 가운데 정렬 (수평: 수직 가운데, 수직: 수평 가운데)
  • baseline: Flex Items를 각 줄의 문자 기준선에 정렬

 

Flex Items

• Flex Container의 자식 요소
• 인라인 요소

📍 속성

order

• Flex Item의 순서
• 값
  • 0 [기본 값] : 순서 없음
  • 숫자: 숫자가 작을 수록 먼저

 

flex-grow

• Flex Item의 증가 너비 비율
• 값
  • 0 [기본 값] : 증가 비율 없음
  • 숫자: 증가 비율

(2번째 그림) B, C는 flex-grow가 없으므로 남은 공간을 A가 채움 // (3번째 그림) A는 flex-grow가 없으므로 남은 공간을 B와 C가 2:1 비율로 채움(각 아이템의 Content 너비가 같기 때문에 가능)

 

 flex-shrink

• Flex Item의 감소 너비 비율
• 값
  • 1 [기본 값] : Flex Container 너비에 따라 감소 비율 적용
    • 컨테이너 너비가 아이템들의 총 너비보다 줄어들면 각 아이템의 너비가 비율 유지하면서 줄어듬
  • 숫자: 감소 비율
    • 0이면 컨테이너 너비가 아이템들의 총 너비보다 줄어들어도 각 아이템의 너비는 유지됨

 

flex-basis

• Flex Item의 공간 배분 전 기본 너비
• 값
  • auto [기본 값] : 요소의 Content 너비
  • 단위: px, em, rem 등 단위로 지정

각 아이템의 Content 너비가 다르기 때문에 아이템이 1:1:2 비율로 채우지 않고 각 아이템의 내부 여백을 기준으로 1:1:2로 나눠서 채움

각 아이템의 Content 너비가 다르지만 flex-basis를 0으로 설정하면 아이템을 1:1:2 비율로 채움

 

각 아이템의 Content 너비를 100px로 설정(flex-basis: 100px)하면 내부 여백을 기준으로 1:1:2 비율로 채움

 

flex

• flex: 1의 의미

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

 

---

※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다.