[CSS] 한눈에 보는 Flex 속성 이해하기

웹사이트의 구조를 구성할 때 예전같은 경우 float 또는 inline-block 등의 속성을 이용해 도움을 받았지만 시간이 갈수록 반응형 웹디자인이 대중화되면서 Flex 속성을 많이 이용하는 것 같습니다. 이번 포스팅에서는 Flex에 대해 공부하고 어떤 속성들이 있는지 확인해보겠습니다.

 

Flex 적용하는 방법

Flexible Box, Flexbox 라고 불리기도 하는 Flex는 적용하는 방법이 매우 간단합니다.

정렬시키고 싶은 요소들의 부모 속성에 display:flex; 만 입력해주면 끝!

<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

.container {
	display:flex;
}

 

display : flex

 

Flex 속성에 대해

이번에는 Flex를 적용한다면 어떠한 속성을 추가로 부여할 수 있을지 알아보도록 하겠습니다.

 

속성	의미
display	Flex Container를 정의
justify-content	플렉스 요소의 수평 방향 정렬 방식을 설정
align-items	플렉스 요소의 수직 방향 정렬 방식을 설정
flex-direction	플렉스 요소가 위치할 방향을 설정
flex-wrap	플렉스 라인에 여유 공간이 없다면 줄바꿈할 수 있도록 설정
flex-flow	flex-direction, flex-wrap 2가지 속성을 한번에 설정하여 사용
align-content	플렉스 요소의 여러 줄 사이 간격 조정
order	플렉스 요소들의 우선 순위를 정하여 배치
align-self	플렉스 단일 개별 요소 적용할 수 있는 속성으로 align-items의 수직 정렬 기능 사용 가능
flex-grow	다른 플렉스 요소들이 쓰고 남은 공간을 흡수하여 성장 (defult: 0)
flex-shrink	플렉스 요소들 간에 자신을 희생하여 공간을 줄일 수 있고 그 너비를 고정할 수 있음 (defult: 1)
flex	순차적으로 flex-grow, flex-shrink, flex basis 3가지 속성을 한번에 설정하여 사용 가능

 

justify-content

플렉스 요소의 수평 방향 정렬 방식을 설정

flex-start // 기본 설정, 플렉스 요소는 플렉스 컨테이너의 앞쪽부터 배치
flex-end // 플렉스 요소는 플렉스 컨테이너의 뒤쪽부터 배치
center // 플렉스 요소는 플렉스 컨테이너의 가운데부터 배치
space-between // 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치
space-around // 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치

 

justify-content : flex-start

 

justify-content : flex-end

 

justify-content : center

 

justify-content : space-between

 

justify-content : space-around

 

align-items

플렉스 요소의 수직 방향 정렬 방식을 설정

stretch // 기본 설정, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치
flex-start // 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치
flex-end // 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치
center // 플렉스 요소는 플렉스 컨테이너의 가운데에 배치
baseline // 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치

 

align-items : stretch

 

align-items : flex-start

 

align-items : flex-end

 

align-items : center

 

align-items : baseline

 

flex-direction

플렉스 요소가 위치할 방향을 설정

row // 요소들을 텍스트의 방향과 동일하게 정렬
row-reverse // 요소들을 텍스트의 반대 방향으로 정렬 
column // 요소들을 위에서 아래로 정렬
column-reverse // 요소들을 아래에서 위로 정렬

 

flex-direction : row

 

flex-direction : row-reverse

 

flex-direction : column / flex-direction : column-reverse

 

flex-wrap

플렉스 라인에 여유 공간이 없다면 줄바꿈할 수 있도록 설정

nowrap // 모든 요소들을 한 줄에 정렬
wrap // 요소들을 여러 줄에 걸쳐 정렬
wrap-reverse // 요소들을 여러 줄에 걸쳐 반대로 정렬

 

flex-wrap : nowrap

 

flex-wrap : wrap

 

flex-wrap : wrap-reverse

 

align-content

플렉스 요소의 여러 줄 사이 간격 조정 (두 줄 이상을 가지는 Flex box에서만 효과 있음)

stretch // 기본 설정, 여러 줄들을 컨테이너에 맞도록 늘림
flex-start // 여러 줄들을 컨테이너의 꼭대기에 정렬
flex-end // 여러 줄들을 컨테이너의 바닥에 정렬
center // 여러 줄들을 세로선 상의 가운데에 정렬
space-between // 여러 줄들 사이에 동일한 간격을 둠
space-around // 여러 줄들 주위에 동일한 간격을 둠

 

order

플렉스 요소들의 우선 순위를 정하여 배치

• integer(정수) 값으로 표현되며 z-index와 같이 우선순위를 정할 수 있음

 

Flex 브라우저 지원

Flex 속성은 IE 10부터 지원하기 때문에 -ms- 와 같은 prefix가 필요함.

display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;