CSS 레이아웃의 Flex 정복하기!!!

2022-01-08 5 분 소요

Flex(플렉스) 란?

Flex는 일반적으로 Flexible Box, FlexBox라고 불린다.
Flex는 레이아웃 배치 전용 기능으로 만들어졌다. 기존에 레이아웃을 만들 때 사용하던 float이나 inline-block 등을 이용하는 방식보다 훨씬 쉽고 효율적인 기능이 많다.

Flex 레이아웃을 만드는 기본적인 HTML 구조는 아래와 같습니다.
```
<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
	<div class="item">helloflex</div>
</div>
```
부모 요소인 div.container를 Flex Container라고 부르고, 자식 요소인 div.item들을 Flex Item이라고 부른다. “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하면 된다.

Flex의 속성으로는
- 컨테이너에 적용하는 속성
- 아이템에 적용하는 속성

컨테이너에 적용하는 속성들

.container {
	display: flex;
	/* display: inline-flex; */
}

Flex 컨테이너에 display: flex;를 적용하면 컨테이너안에 block 형태로 나타나던 아이템들이 Flex에 의하여 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼 차지하게 된다. 마치 inline 요소처럼 배치된다. height는 컨테이너 높이만큼 늘어난다.

inline-flex는 block과 inline-block의 관계라고 생각하면 된다. 아이템의 배치와 관련 있다기 보다는, 컨테이너가 주변 요소들과 어떻게 배치될지 결정하는 값이다. 즉 inline-flex는 inline-block처럼 동작한다.

아이템들이 배치된 방향의 축을 메인축, 메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)이라고 부른다.

배치 방향 설정 flex-direction

아이템들이 배치되는 축의 방향을 결정하는 속성이다. (즉, 가로 세로 정해주는 것)

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

row(기본값)은 아이템들이 행(가로) 방향으로 배치됩니다.
row-reverse는 아이템들이 역순으로 가로 배치됩니다.
column은 아이템들이 열(세로) 방향으로 배치됩니다. (block 요소처럼)
column-reverse는 아이템들이 역순으로 세로 배치 됩니다.

이러한 것들은 주로 크기가 작은 모바일 기기에서 column으로 배치하다가 일정 폭 이상이 되면 row로 바꿔주는 식으로 반응형 레이아웃을 구현한다.

줄넘김 처리 설정 flex-wrap

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

nowrap은 (기본값)줄바꿈을 하지 않습니다. 넘치면 그냥 삐져 나간다.
wrap은 줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작한다.
wrap-reverse는 줄바꿈을 하는데, 아이템을 역순으로 배치한다.

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다. flex-direction, flex-wrap의 순으로 한 칸 떼고 써주면 된다.

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

정렬

“justify”는 메인축 방향으로 정렬
“align”은 수직축 방향으로 정렬

## 메인축 방향 정렬 justify-content

 .container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
 }

flex-start는 (기본값)아이템들을 시작점으로 정렬한다. flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위이다.
flex-end는 아이템들을 끝점으로 정렬한다. flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래이다.
center는 아이템들을 가운데로 정렬한다.
space-between은 아이템들의 “사이(between)”에 균일한 간격을 만들어 준다. 예를 들면 [a b c]
space-around는 아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다. 예를 들면 [ a b c ]
space-evenly는 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다. 예를 들면 [ a b c ]

수직축 방향 정렬 align-items

 .container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */

stretch는 (기본값)아이템들이 수직축 방향으로 끝까지 쭈욱 늘어난다.
flex-start는 아이템들을 시작점으로 정렬한다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이다.
flex-end는 아이템들을 끝으로 정렬한다. flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽이다.
center는 아이템들을 가운데로 정렬한다.
baseline는 아이템들을 텍스트 베이스라인 기준으로 정렬한다.

아이템을 한 가운데로 놓고 싶을 때

justify-content: center;

align-item: center;

이용하면 된다.

여러 행 정렬 align-content

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성이다.

 .container {
	flex-wrap: wrap;
	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; */
 }

stretch 는 (기본값)아이템들이 수직축 방향으로 끝까지 늘려서 행 정렬.
flex-start 는 (기본값)아이템들을 시작점으로 정렬한다.
flex-end는 아이템들을 끝점으로 정렬한다.
center은 아이템들을 가운데로 정렬한다.
space-between은 아이템들의 “사이(between)”에 균일한 간격을 만들어 준다.
space-around은 아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다.
space-evenly는 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.

위에 것들은 구글링으로 그림으로 보면 이해하기 쉽다 .

Flex 아이템에 적용하는 속성들

유연한 박스의 기본 영역 flex-basis

flex-basis는 Flex 아이템의 기본 크기를 설정한다. (flex-direction이 row일 때는 너비, column일 때는 높이)

 .item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
 }

flex-basis의 값으로는 우리가 width, height 등에 사용하는 각종 단위의 수가 들어갈 수 있고, 기본값 auto는 해당 아이템의 width값을 사용한다. width를 따로 설정하지 않으면 컨텐츠의 크기가 된다. content는 컨텐츠의 크기로, width를 따로 설정하지 않은 경우와 같다.

유연하게 늘리기 flex-grow

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. flex-grow에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 채우게 된다.

flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각하시면 된다.

 .item {
	flex-grow: 1;
	/* flex-grow: 0; */ /* 기본값 */
 }

 /* 1:2:1의 비율로 세팅할 경우 */
 .item:nth-child(1) { flex-grow: 1; }
 .item:nth-child(2) { flex-grow: 2; }
 .item:nth-child(3) { flex-grow: 1; }

유연하게 줄이기 flex-shrink

flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. flex-shrink에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아진다. 기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있다.

 .item {
	flex-basis: 150px;
	flex-shrink: 1; /* 기본값 */
 }

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있어요. 고정 크기는 width로 설정합니다.

flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성이다. 이 세 속성들은 서로 관련이 깊기 때문에, 이 축약형을 쓰는 편이 여러모로 편리하다.

 .item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
 } 

주의할 점은, flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 된다.

수직축으로 아이템 정렬 align-self

align이니 수직축 정렬이다. align-items의 아이템 버전이다. align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬이다.

 .item {
	align-self: auto;
	/* align-self: stretch; */
	/* align-self: flex-start; */
	/* align-self: flex-end; */
	/* align-self: center; */
	/* align-self: baseline; */
 }

기본값은 auto로, 기본적으로 align-items 설정을 상속 받는다. align-self는 align-items보다 우선권이 있다. 즉, 전체 설정보다 각각의 개별 설정이 우선한다는 것.

배치 순서 order

각 아이템들의 시각적 나열 순서를 결정하는 속성이다. 숫자값이 들어가며, 작은 숫자일 수록 먼저 배치된다. “시각적” 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의해야 한다. 시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없다는 것을 기억해라.

 .item:nth-child(1) { order: 3; } /* A */
 .item:nth-child(2) { order: 1; } /* B */
 .item:nth-child(3) { order: 2; } /* C */

======> 결과 값: B C A

z-index

z-index로 Z축 정렬을 할 수 있다. 숫자가 클 수록 위로 올라온다. (position에서의 z-index랑 똑같이 생각하면 된다.)

 .item:nth-child(2) {
	z-index: 1;
	transform: scale(2);
 }
 /* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */

Twitter Facebook LinkedIn

CSS 레이아웃의 Flex 정복하기!!!

Flex(플렉스) 란?

Flex의 속성으로는