flex 개념정리(부모에 적용하는 속성)

---------컨테이너(부모)에 적용하는 속성--------

1.display

display:flex; (기본값)

자식들에게 inline-block처럼 컨텐츠만큼의 width만을 가지게 한다.

display:inline-flex;

컨테이너도 컨텐츠만큼의 width를 가지게 된다.

 

2.flex-direction (배치 방향 설정)

flex-direction: row; (기본값)

행(가로) 방향으로 배치

flex-direction: row-reverse;

행(가로)방향 역순으로 배치

flex-direction: column;

열(세로)방향으로 배치

flex-direction: column-reverse;

열(세로)방향 역순으로 배치

 

3.flex-wrap (줄넘김 처리 설정)

flex-wrap: nowrap; (기본값)

줄바꿈을 하지 않습니다. 넘치면 그냥 삐쳐나가요

flex-wrap: wrap;

줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작해요

flex-wrap: wrap-reverse;

줄바꿈을 하는데, 아이템을 역순으로 배치해요

 

4.flex-flow(그룹속성, direction/wrap)

flex-flow: row wrap;

아래의 두 줄을 줄여 쓴 것

/* flex-direction: row; */

/* flex-wrap: wrap; */

 

5.justify-content (메인축 방향 정렬)

justify-content: flex-start; (기본값)

아이템들을 시작점으로 정렬합니다.

flex-direction이 row(가로)일 때는 왼쪽부터

flex-direction이 column(세로)일 때는 위부터

justify-content: flex-end;

아이템들을 끝점으로 정렬합니다.

flex-direction이 row(가로)일 때는 오른쪽부터

flex-direction이 column(세로)일 때는 아래부터

justify-content: center;

아이템들을 가운데로 정렬합니다.

 

 

justify-content: space-between;

아이템들의 '사이'에 균일한 간격을 만들어 줍니다.

justify-content: space-around;

아이템들의 '둘레'에 균일한 간격을 만들어 줍니다.

justify-content: space-evenly;

아이템들의 '사이와'양 끝에 균일한 간격을 만들어 줍니다.

 

6.align-items (수직축 방향 정렬)

align-items: stretch; (기본값)

아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다.

align-items: flex-start;

아이템들을 시작점으로 정렬합니다.

flex-direction이 row(가로)일 때는 위부터

flex-direction이 column(세로)일 때는 왼쪽부터

align-items: flex-end

아이템들을 끝점으로 정렬합니다.

flex-direction이 row(가로)일 때는 아래부터

flex-direction이 column(세로)일 때는 오른쪽부터

align-items: center;

아이템들을 가운데로 정렬합니다.

align-items: baseline;

아이템들을 텍스트 베이스라인 기준으로 정렬합니다.

 

tip. 아이템을 한 가운데에 배치하는 법

.container{

   display:flex;

   justify-content: center;

   align-item: center;

}

 

7.align-content (여러 행 정렬)

align-content: stretch; (기본값)

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;