12-5 CSS 속성 - 플렉스(정렬)

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

CSS로 가능한 속성

 

 

---

글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다.
            : 기본값             : 일반              : 잘 사용하지 않음 
ex) width: auto; , max-width: none; 

※ 플렉스

플렉스는 display 속성의 하나의 값으로 아이템들이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성

 

block과 flex의 차이

▶ Flex Container가 사용할 수 있는 속성

  → display

  → flex-flow, flex-direction, flex-wrap

  → justify-content

  → align-content

  → align items

  

▶ Flex Items가 사용할 수 있는 속성

  → order

  → flex, flex-grow, flex-shrink, flex-basis

  → align-self

 

• display

      → Flex Container의 화면 출력(보여짐) 특성

      →  flex  : 블록 요소와 같이 Flex Container 정의

      →  inline-flex  : 인라인 요소와 같이 Flex Container 정의

 

• flex-direction

      → 주 축을 설정

      →  row  : 행 축 (좌 => 우)

      →  row-reverse  : 행 축 (우 => 좌)

      →  column  : 열 축 (위 => 아래)

      →  column-reverse  : 열 축 (아래 => 위)

 

• flex-wrap

      → Flex Items 묶음(줄 바꿈) 여부

      →  nowrap  : 묶음(줄 바꿈) 없음

      →  wrap  : 여러 줄로 묶음

      →  wrap-reverse  : wrap의 반대 방향으로 묶음

 

• justify-content

      → 주 축의 정렬 방법

      →  flex-start  : Flex Items를 시작점으로 정렬

      →  flex-end  : Flex Items를 끝점으로 정렬

      →  center  : Flex Items를 가운데 정렬

      →  space-between  : 각 Flex Item 사이를 균등하게 정렬

      →  space-around  : 각 Flex Item의 외부 여백을 균등하게 정렬

 

• align-content

      → 교차 축의 여러 줄 정렬 방법

      → Item들이 두줄 이상 있어야 동작하고 정렬이 가능한 여백 공간이 있어야 합니다.

      →  stretch  : Flex Items를 시작점으로 정렬

      →  flex-start  : Flex Items를 시작점으로 정렬

      →  flex-end  : Flex Items를 끝점으로 정렬

      →  center  : Flex Items를 가운데 정렬

      →  space-between  : 각 Flex Item 사이를 균등하게 정렬

      →  space-around  : 각 Flex Item의 외부 여백을 균등하게 정렬

 

• align-items

      → 교차 축의 한 줄 정렬 방법

      → Item들이 두줄 이상이면 동작하지 않습니다.

      →  stretch  : Flex Items를 교차 축으로 늘림

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

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

      →  center  : Flex Items를 각 줄의 가운데 정렬

      →  baseline  : 각 Flex Item를 각 줄의 문자 기준선에 정렬

 

• order

      → Flex Item의 순서

      →  0  : 순서 없음

      →  숫자  : 숫자가 작을 수록 먼저

 

• flex-grow

      → Flex Item의 증가 너비 비율

      →  0  : 증가 비율 없음

      →  숫자  : 증가 비율

그림 1)

flex-grow 값을 지정 안한 상태

그림 2)

flex-grow 값이 없는 B,C를 배치 한 후 나머지 칸을 비율 1로 A 배치

그림 3)

flex-grow 값이 없는 A 배치 후 남은 공간을 2 : 1 의 비율로 B, C 배치

 

• flex-shrink

      → Flex Item의 감소 너비 비율

      →  1  : Flex Container 너비에 따라 감소 비율 적용

      →  숫자  : 감소 비율

 

• flex-basis

      → Flex Item의 공간 배분 전 기본 너비 

      →  auto  : 요소의 Content 너비

      →  단위  : px, em, rem 등 단위로 지정

 

---

참고하면 좋은 사이트

An Interactive Guide to Flexbox