[CSS] 레이아웃의 속성!! flex와 속성을 알아보자!

flex란?

 

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

dispaly: flex;		//flex 선언
flex: 1; = flex: 1 1 0; = flex-grow: 1; flex-shrink: 1; flex-basis: 0;
/* (flex: 숫자)는 위의 값이 축약되어 있다.*/
/* flex-grow는 생략이 불가능하며, 나머지는 가능하다. */

---

 

flex의 다양한 속성

 

먼저 flex의 다양한 속성에 대해 나열하고 예시를 통해 하나씩 알아가도록 하겠습니다.

 

flex-grow

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

0	(기본값)
1	항목들이 모두 1이면 같은 크기
양수	값을 높게 줄수록 더 늘어나며, 공간이 부족하면 높아도 무의미하다.

 

flex-shrink

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

0	공간이 부족해도 항목의 크기를 줄일 수 없음
1	(기본값) 자식 요소들이 많아서 컨테이너를 넘치면 안 넘치게 알아서 좁아짐
양수	값을 높게 줄수록 더 좁아지며, 공간이 남으면 어떤 값도 무의미하다.

 

flex-basis

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

auto	(기본값)
50px, 100px, ...	숫자 단위 너비 값 사용 가능. grow, shrink 값이 미지정이면 기본 크기로 고정.

 

flex-direction

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

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

 

justify-content

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

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

 

flex-wrap

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

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

 

flex-flow

flex-direction과 flex-wrap을 나란히 붙여 하나의 속성처럼 쓸 수 있습니다.

그러므로 기본값을 flex-flow: row nowrap;입니다.

 

align-items

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

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

 

align-self

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

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

 

align-content

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

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

 

order

자식 요소들의 순서를 바꿔주는 속성입니다. 몇 번째에 배치할지 순서를 정합니다.

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

---

flex 속성의 적용 예시

 

다음의 프로그램을 통해 위에서 나열한 flex 속성들의 예시를 살펴보겠습니다.

하나씩 비교해 가면서 보시면 좋을 것 같습니다.

 

 

See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.

 

Flexbox playground by Gabi