[CSS] 플렉스(Flex)

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

CSS에서 레이아웃을 배치하는데 사용되는 대표적인 개념은

Flex와 Grid이다.

 

두 개념의 가장 큰 차이점은 1차원(Flex)이냐 2차원(Grid)이냐이다.

Flex는 행 또는 열이 하나의 축이 되어 축을 기준으로 배치되고,

Grid는 행과 열을 동시에 바둑판 처럼 배치한다.

 

이번 게시물에서는 플렉스(Flex)의 개념에 대해 알아보자.

 

1. Flex의 구성

먼저 Flex개념을 이해하기 위해서는 Flex가 어떻게 구성되는지 알아야 한다.

Flex는 Flex Container와 Flex Item으로 구성된다.

 

플렉스 컨테이너(Flex Container) : 자식 요소들을 정렬하기 위한 부모 요소이다.

플렉스 아이템(Flex Item) : 플렉스 컨테이너의 자식 요소이다.

 

플렉스 컨테이너와 플렉스 아이템의 관계를 HTML로 작성하면 아래와 같다.

<div class="container">
	<div class="item">item1</div>
	<div class="item">item2</div>
	<div class="item">item3</div>
</div>

 

Flex Container와 Flex Item으로 나뉘기 때문에 각각 적용할 수 있는 CSS 속성이 다르고,

속성을 어떻게 설정하느냐에 따라 다르게 보인다.

 

2. Flex Container의 속성

Flex Container와 관련된 속성은 다음의 것들이 있다.

flex-direction	아이템들이 어느 방향(세로/가로)으로 쌓일 지 결정한다.
flex-wrap	아이템을 한 줄에 모두 넣을지, 아니면 여러 줄에 걸쳐 배치할지 결정한다.
flex-flow	flex-direction과 flex-wrap을 한번에 설정한다.
justify-content	주 축을 따라 아이템을 정렬한다.
algin-items	교차 축을 따라 아이템을 정렬한다.
align-content	아이템들이 2줄 이상이 되었을 때, 수직축 방향 정렬을 결정하는 속성

 

display 속성

이전에 display속성에 대해 다룬 적이 있다.

하지만, 여기서는 flex와 관련된 내용만 다루도록 하자.

 

flex와 관련된 속성값은 flex, inline-flex가 있다.

.flex-container {
  display: flex;
}

 

flex

컨테이너안에 속한 아이템이 가로 방향으로 배치된다.

이 때, 아이템의 height가 컨테이너의 높이만큼으로 늘어난다.

또한, 부모 요소의 가로 공간을 모두 차지한다.

 

inline-flex 

flex와 비슷하게 동작하지만 부모 요소의 가로 공간을 모두 차지하지 않고

item들의 크기에 따라 Flex Container의 크기가 달라진다.

또한, 같은 줄에 다른 요소들이 위치할 수 있다.

 

 

 

flex-direction 속성

아이템들이 배치되는 방향을 의미한다.

조금 더 쉽게 말하면 아이템들이 어느 방향(세로/가로)으로 쌓일 지 결정한다.

 

위 사진에서 flex가 기본적으로 가로로 쌓이지만 방향을 설정하여 세로로 바꿀 수 있다.

 

flex-direction 속성은 row, column, row-reverse, column-reverse 속성 값을 가진다.

row(기본값), row-reverse는 가로 방향이고,

column, column-reverse는 세로 방향이다.

.flex-container {
  display: flex;
  flex-direction: column;
}

 

 

flex-wrap 속성

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

 

속성값으로는 nowrap, wrap, wrap-reverse 값을 가진다.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

 

nowrap

줄바꿈을 하지 않는다. 영역을 벗어나는 대로 그냥 둔다.

 

wrap

영역을 벗어난 FlowItem을 한 줄 내린다. FlexContainer의 크기는 커진다.

 

wrap-reverse

영역을 벗어난 FlowItem을 위로 올린다. FlexContainer의 크기는 커진다.

 

 

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성

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

 

 

justify-content

컨테이너 안에서 아이템들을 어디에 배치할 것인지에 대한 것이다.

속성값은 flex-start, flex-end, center, space-between, space-around, space-evenly가 있다.

.flex-container {
  display: flex;
  justify-content: flex-start;
}

 

flex-start

아이템을 시작점에 정렬한다. 기본값이다.

 

flex-end

아이템을 끝점에 정렬한다.

row-reverse와 다른 점은 item끼리의 순서는 바뀌지 않는다는 점이다.

 

center

아이템을 가운데 정렬한다.

 

space-between

균일한 간격으로 한줄을 꽉 채우게 배치한다.

 

space-around

아이템 둘레에 균일한 간격을 만든다.

 

space-evenly

아이템들의 사이와 양 끝에 균일한 간격을 만든다.

 

사실 space-between, space-around, space-evenly는 차이가 있기는 하지만,

비슷한 느낌이기 때문에 하나로 묶어서 그림으로 표현했다.

 

자세한 차이가 궁금하다면 1분코딩 페이지를 참고하면 된다.

 

 

align-item 속성

기본 축의 수직방향으로 어떻게 Item을 배치할 지 결정한다.

 

속성값으로는 stretch, flex-start, flex-end, center, baseline이 있다.

.flex-container {
  display: flex;
  align-items: center;
}

 

stretch

아이템들을 수직축 방향으로 Container의 크기에 맞게 늘린다. 기본값이다.

 

flex-start

아이템들을 늘리지 않고 시작점으로 정렬한다.위쪽 또는 왼쪽

 

flex-end

아이템들을 끝으로 정렬한다. 아래쪽 또는 오른쪽

 

center

가운데 정렬에 정렬한다.

 

baseline

베이스라인을 기준으로 정렬한다.

 

 

align-content 속성

아이템들이 2줄 이상이 되었을 때, 수직축 방향 정렬을 결정하는 속성이다.

flex-wrap:wrap이 설정된 상태여야 한다.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

 

속성값으로 아래의 값들을 가질 수 있다.

- stretch

- flex-start

- flex-end

- center

- space-between

- space-around

- space-evenly

 

위의 다른 속성들에서 보여줬던 그림과 비슷하기 때문에 그림 예제는 제외하겠다.

자세한 예제가 궁금하면 1분 코딩 페이지를 참고하기 바란다.

 

3. Flex Item의 속성

위에서 Flex Container에 적용될 수 있는 속성을 알아보았다.

이번에는 Flex 아이템에 적용될 수 있는 속성에 대해 알아보자.

 

Flex Container는 전체적으로 바꾸었으면

Flex Item은 Item 하나하나에 초점을 맞춘다고 생각하면 쉽게 느껴질 수도 있다.

 

Flex Item에 적용할 수 있는 속성은 아래와 같다.

flex-basis	아이템들의 주 축 방향의 기본 크기를 설정한다.
flex-grow	아이템이 flex-basis값보다 커질 수 있는지를 결정한다.
flex-shrink	아이템이 flex-basis값보다 작아질 수 있는지를 결정한다.
align-self	수직축 중심으로 아이템을 정렬한다.
order	순서를 지정한다.

 

 

flex-basis

아이템의 기본 크기를 설정한다.

flex-direction이 row일 때는 너비, column일 때는 높이를 의미한다.

 

width를 설정하면 모든 item의 크기가 100이 되는데

flex-basis : 100px를 하면 100px를 넘는 것은 그대로 두고, 100px보다 작은 것은 크게 늘린다.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

 

 

flex-grow 속성

아이템이 flex-basis값보다 커질 수 있는지를 결정하는 속성이다.

 

기본값인 0이면 기존의 크기를 그대로 유지한다.

0 보다 큰 값이 세팅이 되면 flexible박스로 변하고

flex-grow속성이 적용된 아이템의 grow값의 비율로 container의 크기를 나누어 영역을 차지한다.

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

 

 

flex-shrink

아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성이다.

기본값은 1이며 container의 크기에 맞게 Item이 축소된다.

 

flex-shrink 속성은 다음과 같은 상황에 많이 쓴다.

flex-shrink 속성의 값을 0으로 설정하면 container의 크기가 변해도 일정한 크기를 유지한다.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
</div>

 

 

align-self 속성

수직축으로 아이템을 정렬한다.

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

 

Container의 align-items에서 수직축으로 아이템을 정렬할 수 있었다.

하지만, align-self는 하나의 아이템만 따로 정렬하고 싶을 때 사용한다.

 

기본값은 align-items 설정을 상속받는다.

 

 

order 속성

Flex Container 안에서 배치될 순서를 의미한다.

작은 숫자일 수록 먼저 배치된다.

 

일반적으로 따로 설정을 하지 않으면 먼저 위치한 것이 먼저 온다.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

 

4. 참고자료

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

https://www.w3schools.com/css/css3_flexbox.asp

W3Schools.com