Css 레이아웃에서 중요한 display: flex(Flexible Box) 사용법

1. 부모 요소인 container와 자식 요소인 item이 있습니다.

컨테이너가 Flex의 영향을 받는 공간이라고 생각하시면 됩니다.

<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
</div>

 

 

2. container에는 diplay, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items 등의 속성을 사용할 수 있습니다. 

 

속성	의미
display : flex	flex container를 정의
flex-direction	Flex Items의 주 축(main-axis)을 설정
flex-wrap	Flex Items의 여러 줄 묶음(줄 바꿈) 설정
flex-flow	flex-direction와 flex-wrap의 단축 속성
justify-content	주 축(main-axis)의 정렬 방법을 설정
align-content	교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
align-items	교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)

 

2-1. display

display 속성으로 Flex Container를 정의합니다.
보통 요소의 표시 방법을 display: block;, display: inline-block 혹은 display: none; 같이 사용하는 경우가 많습니다.
또한 같은 요소의 표시 방법으로 Block이나 Inline이 아닌 Flex(display: flex, display: inline-flex)로 정의합니다.

 

값	의미
flex	Block 특성의 Flex Container를 정의
inline-flex	Inline 특성의 Flex Container를 정의

flex와 inline-flex는 차이는 단순합니다.
display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며,
display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다.

 

2-2. flex-direction, flex-wrap, flex-flow

 

flex-directon은 items의 주 축(main-axis)을 설정합니다.

flex-direction: 주축;

.container {
  flex-flow: row-reverse wrap;
}

값	의미	기본값
row	Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시	row
row-reverse	Items를 row의 반대 축으로 표시
column	Items를 수직축(위에서 아래로)으로 표시
column-reverse	Items를 column의 반대 축으로 표시

 

flex-wrap은 Items의 여러 줄 묶음(줄 바꿈)을 설정합니다.

flex-wrap: 여러줄묶음;

값	의미	기본값
nowrap	모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시)	nowrap
wrap	Items를 여러 줄로 묶음
wrap-reverse	Items를 wrap의 역 방향으로 여러 줄로 묶음

 

flex-flow는 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정합니다.

flex-flow: 주축 여러줄묶음;

값	의미	기본값
flex-direction	Items의 주 축(main-axis)을 설정	row
flex-wrap	Items의 여러 줄 묶음(줄 바꿈) 설정	nowrap

 

2-3. justify-content

 

justify-content는 주 축(main-axis)의 정렬 방법을 설정합니다.

justify-content: 정렬방법;

값	의미	기본값
flex-start	Items를 시작점(flex-start)으로 정렬	flex-start
flex-end	Items를 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around	Items를 균등한 여백을 포함하여 정렬

 

2-4. align-content

 

align-content는 교차 축(cross-axis)의 정렬 방법을 설정합니다.
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있습니다.

Items가 한 줄일 경우 align-items 속성을 사용하세요.

 

align-content: 정렬방법;

값	의미	기본값
stretch	Container의 교차 축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 시작점(flex-start)으로 정렬
flex-end	Items를 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around	Items를 균등한 여백을 포함하여 정렬

값 stretch는 교차 축에 해당하는 너비(속성 width 혹은 height)가 값이 auto(기본값)일 경우 교차 축을 채우기 위해 자동으로 늘어납니다.

 

2-5. align-items

 

align-items는 교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다.
Items가 한 줄일 경우 많이 사용합니다.

주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상) 일 경우에는 align-content 속성이 우선합니다.
따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.

 

align-items: 정렬방법;

값	의미	기본값
stretch	Container의 교차 축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 각 줄의 시작점(flex-start)으로 정렬
flex-end	Items를 각 줄의 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
baseline	Items를 문자 기준선에 정렬

 

 

3. items에는 order, flex-grow, flex-shrink, flex-basis, align-self 등의 속성을 사용할 수 있습니다.

 

값	의미
order	Flex Item의 순서를 설정
flex	flex-grow, flex-shrink, flex-basis의 단축 속성
flex-grow	Flex Item의 증가 너비 비율을 설정
flex-shrink	Flex Item의 감소 너비 비율을 설정
flex-basis	Flex Item의 (공간 배분 전) 기본 너비 설정
align-self	교차 축(cross-axis)에서 Item의 정렬 방법을 설정

 

3-1. order

 

order는 Item의 순서를 설정합니다.
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.
음수가 허용됩니다.

HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용합니다.

 

order: 순서;

값	의미	기본값
숫자	Item의 순서를 설정	0

 

3-2. flex

 

flex는 Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성입니다.

 

flex: 증가너비 감소너비 기본너비;

.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}

값	의미	기본값
flex-grow	Item의 증가 너비 비율을 설정	0
flex-shrink	Item의 감소 너비 비율을 설정	1
flex-basis	Item의 (공간 배분 전) 기본 너비 설정	auto

 

3-3. flex-grow

 

flex-grow는 Item의 증가 너비 비율을 설정합니다.
숫자가 크면 더 많은 너비를 가집니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.

 

모든 Items의 총 증가 너비(flex-grow)에서 각 Item의 증가 너비의 비율 만큼 너비를 가질 수 있습니다.
예를 들어 Item이 3개이고 증가 너비가 각각 1, 2, 1이라면,
첫 번째 Item은 총 너비의 25%(1/4)을,
두 번째 Item은 총 너비의 50%(2/4)를,
세 번째 Item은 총 너비의 25%(1/4)을 가지게 됩니다.

 

flex-grow: 증가너비;

값	의미	기본값
숫자	Item의 증가 너비 비율을 설정	0

 

3-4. flex-shrink

 

flex-shrink는 Item이 감소하는 너비의 비율을 설정합니다.
숫자가 크면 더 많은 너비가 감소합니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.

 

감소 너비(flex-shrink)는 요소의 너비에 영향을 받기 때문에 계산하기 까다롭습니다.
영향을 받는다는 요소의 너비는 width, height, flex-basis 등으로 너비가 지정된 경우를 의미합니다.
Container의 너비가 줄어 Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 Item의 너비가 줄어듭니다.

예를 들어 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 같은 Item이 2개이고 지정된 감소 너비가 각각 2와 1이라면,
감소 너비는 2:1 비율이며,
첫 번째 Item은 90px의 2/3인 60px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/3인 30px 만큼 너비가 감소합니다.

다른 예시로 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 다른 Item이 2개이고 요소 너비는 각각 200과 100이고,
지정된 감소 너비가 각각 2와 1이라면,
200 x 2 = 400과 100 x 1 = 100 즉 감소 너비는 4:1 비율이며,
첫 번째 Item은 90px의 4/5인 72px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/5인 18px 만큼 너비가 감소합니다.

 

flex-shrink: 감소너비;

값	의미	기본값
숫자	Item의 감소 너비 비율을 설정	1

 

3-5. flex-basis

 

flex-basis는 Item의 (공간 배분 전) 기본 너비를 설정합니다.
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다.
하지만 단위 값이 주어질 경우 설정할 수 없습니다.

 

flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의합시다.

flex-basis: 기본너비;

값	의미	기본값
auto	가변 Item과 같은 너비	auto
단위	px, em, cm 등 단위로 지정

 

3-6. align-self

 

교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정합니다.

align-items는 Container 내 모든 Items의 정렬 방법을 설정합니다.
필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있습니다.
이 속성은 align-items 속성보다 우선합니다.

 

align-self: 정렬방법;

값	의미	기본값
auto	Container의 align-items 속성을 상속받음	auto
stretch	Container의 교차 축을 채우기 위해 Item을 늘림
flex-start	Item을 각 줄의 시작점(flex-start)으로 정렬
flex-end	Item을 각 줄의 끝점(flex-end)으로 정렬
center	Item을 가운데 정렬
baseline	Item을 문자 기준선에 정렬