레이아웃에서 flex를 사용하는 법을 알아보자

01. flex layout

flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다.

 

display: flex;

display: -webkit-flex;

display: -ms-flexbox;

 

위의 구문은 해당 요소에 flex로 레이아웃을 설계하고 선언한다는 뜻입니다.

 

• flex

지금은 float 세 개의 요소를 가로로 나열할 수 있습니다.

flex로 구현한다면 다음과 같이 표현합니다.

 

flex: 1;

 

flex: 1;은 원래 flex: 1 1 0;의 줄인 표현입니다.

 

지금은 1 1 auto와도 같습니다. 또 1 1 100px과도 같습니다. 

 

앞이 1이면 뒤가 뭐든 같은데, 이 세 값은 flex-grow, flex-shrink, flex-basis입니다.

속성 값	속성 설명
flex: 1 0 100px ;	1: flex-grow (생략 불가능)
	0: flex-shrink (생략 가능)
	100px: flex-basis (생략 가능)

 

• flex-grow

자식 요소가 적거나 그 크기가 작아 공간이 남을 때 항목의 크기를 늘려 채워두는 방법.

속성 값	속성 설명
0	(기본 값)
1	항목들이 모두 1이면 같은 크기임
양수	갚을 높게 줄수록 더 늘어남 공간이 부족할 때는 어떤 값도 무의미

 

• flex-shrink

자식 요소가 많거나 그 크기가 커서 공간이 부족할 때 각 항목의 크기를 줄여 채워주는 방법.

속성 값	속성 설명
0	공간이 부족해도 항목들의 크기를 줄일 수 있음
1	(기본 값) - 자식 요소들이 많아서 컨테이너를 넘치면 안 넘치게 알아서 좁아짐
양수	갚을 높게 줄수록 더 좁아짐. (내부적으로 수죽지수가 자동 계산됨) 공간이 남을 때는 어떤 값도 무의미

flex-shrink 속성의 기본값은 '1'이기 때문에 자식 요소는 기본적으로 좁아집니다.

 

• flex-basis

flex 자식 요소들의 초기 길이를 지정하는 속성입니다.

flex에서는 width 속성을 주지 않고, 대신 flex-basis를 사용합니다.

속성 값	속성 설명
auto	(기본값)
50px, 100px, ...	원하는 가로 크기를 부여함

자식 요소들이 늘어나지도 줄어들지도 않고 원래의 크기(100px)를 가지기 원한다면 flex: 0 0 100px로 지정합니다.

 

속성값	생략 속성	속성 설명
flex: none;	모두 생략	flex: 0 0 auto;
flex: 1;	flex-shrink, flex-basis 생략	flex: 1 1 0;과 같음
flex: 100px;	flex-grow, flex-shrink 생략	flex: 1 1 100px;과 같음
flex: 1 1;	flex-basis 생략	flex: 1 1 0;과 같음
flex" 1 100px;	flex-shrink 생략	flex: 1 1 100px;과 같음

flex-grow: 1;을 이용하면 공간이 남아도 한 줄 가득 꽉 채울 수 있고, flex-shrink: 1;을 이용하면 공간이 넘쳐도 한 줄로 줄여서 채울 수 있습니다.

 

자식 요소들이 더 많아지면 정렬과 배치의 문제가 발생합니다.

 

• flex-direction

자식 요소를 나열하는 방향을 지정하는 속성입니다.

부모 요소에게 지정됩니다.

 

속성 값	속성 설명
column	위에서 아래로 나열
column-reverse	아래에서 위로 나열
row (기본값)	좌측에서 우측으로 나열
row-reverse	우측에서 좌측으로 나열

 

• justify-content

공간이 남을 때, flex-grow: (); 일 때 자식 요소들이 가로 정렬하는 속성입니다.

속성 값	속성 설명
flex-start(기본값)	시작쪽으로 정렬(보통 왼쪽 정렬, flex-direction: row-reverse일 때는 오른쪽)
flex-end	끝쪽으로 정렬 (보통 오른쪽, flex-direction: row-reverse일 때는 왼쪽)
center	중앙으로 정렬
space-between	양쪽 정렬
space-around	요소 좌우 동일 간격

 

• flex-wrap

flex 자식 요소들의 줄바꿈 방식을 지정하는 속성입니다.

속성 값	속성 설명
wrap	자식 요소들이 많으면 다음 줄로 넘침
nowrap(기본)	자식 요소들이 많아도 한 줄 안에 배치됨
wrap-reverse	자식 요소들이 많으면 다음 윗 줄로 넘침

 

• align-items

자식 요소들이 새로 정렬하는 속성입니다.

속성 값	속성 설명
flex-start	시작쪽으로 정렬 (보통 위쪽, flex-direction: column-reverse 일 때는 아래쪽)
flex-end	끝쪽으로 정렬 (보통 아래쪽, flex-direction: column-reverse 일 때는 위쪽)
center	세로 중앙 정렬
baseline	글자의 baseline 기준으로 정렬
stretch (기본값)	부모 요소의 세로 크기를 따라 확장됨

 

• order

자식 요소들의 순서를 바꿔주는 속성입니다.

몇 번 째에 배치할 지 순서를 지정합니다.

속성 값	속성 설명
0 (기본값)	순서를 바꾸지 않음
양수	원하는 순서를 지정
음수	좌측으로 자리를 바꾸는 함수

 

• align-self

자식 요소 중 선택된 항목에 대해서만 세로로 다시 정렬하는 속성입니다.

속성들은 align-items의 속성들과 같습니다.

 

• align-content

flex-wrap: wrap; 일 경우 여러 줄을  세로로 정렬하는 속성입니다.

속성들은 align-items의 속성들과 같습니다.