grid가 대세인것 같긴하지만 아직 flex도 많이 쓰이고있다.

이번에는 유동 격자 표현 방법 중 하나인 flex에 대해 알아보자.

flex

grid와 다르게 flex는 구버전 IE에서도 호환이 잘된다.

기본 레이아웃

flex로 레이아웃을 짤 때 flex Container안에 각각의 flex item들을 넣는다.

flex contatiner에서 배치 방향 설정하는 방법과, 줄 넘김하는 방법, flex item을 정렬하는 방법을 알아볼 수 있다.

<div class="container">
	<div class="item">flex item1</div>
	<div class="item">flex item2</div>
	<div class="item">flex item3</div>
	<div class="item">flex item4</div>
	<div class="item">flex item5</div>
	<div class="item">flex item6</div>
	<div class="item">flex item7</div>
	<div class="item">flex item8</div>
	<div class="item">flex item9</div>
</div>

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

CSS로 레이아웃 배치

CSS 이용하여 레이아웃 배치하는 방법에 대해 알아보자.

배치 방향 설정하는 방법

.container{
flex-direction: row;
}

.container{
flex-direction: row-reverse;
}

.container{
flex-direction: column;
}

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

줄 넘김하는 방법

flex-wrap

.container{
flex-wrap: nowrap;
}

.container{
flex-wrap: wrap;
}

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

flex item을 정렬

justify-content

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

.container {
justify-content: flex-end;
}

.container {
justify-content: center;
}

.container {
justify-content: space-between;
}

.container {
justify-content: space-around;
}

.container {
justify-content: space-evenly;
}

align-items

.container {
align-items: stretch;
}

.container {
align-items: flex-start;
}

.container {
align-items: flex-end;
}

.container {
align-items: center;
}

.container {
align-items: baseline;
}

속성 값

align-items: stretch;

:

flex item을 세로 사이즈에 꽉 차게 표현한다.

align-items: flex-start;

:

flex item을 세로로 위쪽 정렬한다.

align-items: flex-end;

:

flex item을 세로로 아래쪽 정렬한다.

align-items: center;

:

flex item을 세로로 가운데 정렬한다.

align-items: baseline;

:

flex item을 텍스트 베이스라인 기준으로 정렬한다.

align-content

flex-wrap: wrap;이 설정되어있을 때 flex item이 2줄 이상 됬을 때 세로 정렬하는 속성.

align-content: stretch;

.container {
flex-wrap: wrap;
align-content: stretch;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-content: flex-start;

.container {
align-content: flex-start;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-content: flex-end;

.container {
align-content: flex-end;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-content: center;

.container {
align-content: center;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-content: space-between;

.container {
align-content: space-between;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-content: space-around;

.container {
align-content: space-around;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-content: space-evenly;

.container {
align-content: space-evenly;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

속성 값

align-content: stretch;

:

flex item들을 모두 그룹화하여 세로로 꽉 차게 표현한다.

align-content: start;

:

flex item들을 모두 그룹화하여 세로로 위쪽 정렬한다.

align-content: end;

:

flex item들을 모두 그룹화하여 세로로 아래쪽 정렬한다.

align-content: center;

:

flex item들을 모두 그룹화하여 세로로 가운데 정렬한다.

align-content: space-between;

:

flex item들을 모두 그룹화하여 세로로 가장 위/아래는 여백 없이 가운데에만 여백을 두고 정렬한다.

align-content: space-around;

:

flex item들을 모두 그룹화하여 세로로 각 flex item 마다 여백을 위아래로 똑같이 두고 정렬한다.

align-content: space-evenly;

:

flex item들을 모두 그룹화하여 세로로 모든 여백을 똑같이 두고 정렬한다.

align-self

align-self: auto;

.item:nth-child(1) {
align-self: auto;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-self: stretch;

.item:nth-child(1) {
align-self: stretch;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-self: flex-start;

.item:nth-child(1) {
align-self: flex-start;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-self: flex-end;

.item:nth-child(1) {
align-self: flex-end;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-self: center;

.item:nth-child(1) {
align-self: center;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

align-self: baseline;

.item:nth-child(1) {
align-self: baseline;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

속성 값

align-self: auto;

:

flex item의 세로 사이즈를 자동으로 표현한다.

align-self: stretch;

:

flex item을 세로로 꽉 차게 표현한다.

align-self: flex-start;

:

flex item을 세로 위쪽 정렬한다.

align-self: flex-end;

:

flex item을 세로 아래쪽 정렬한다.

align-self: center;

:

flex item을 세로 가운데 정렬한다.

align-self: baseline;

:

flex item을 텍스트 베이스라인 기준으로 정렬한다.

order

order: 1;

.item:nth-child(1) {
order: 2;
}

.item:nth-child(2) {
order: 1;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

속성 값

order: 1;

:

1번째 flex item으로 배치한다.

order: 2;

:

2번째 flex item으로 배치한다.

z-index

z-index

.item:nth-child(1) {
z-index: 1;
transform: scale(2);
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

속성 값

z-index: 1;

:

위로 올라오게 배치한다.

transform: scale(2);

:

flex item 사이즈를 2배로 만든다.

flex item 크기

속성

flex-basis

:

flex item에서 사용하며 flex item의 기본 크기 설정한다.

flex-grow

:

flex item에서 사용하며 flex item의 사이즈가 flex-basis의 값보다 커질 수 있는지 결정한다.

flex-shrink

:

flex item에서 사용하며 flex item의 사이즈가 flex-basis의 값보다 작아질 수 있는지 결정한다.

flex

:

flex item에서 사용하며 flex-grow, flex-shrink, flex-basis를 한 번에 표현하는 속성. flex-grow, flex-shrink, flex-basis 순서대로 기재한다.

flex-basis

flex-basis: auto;

.item:nth-child(1) {
flex-basis: auto;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

flex-basis: 0;

.item:nth-child(1) {
flex-basis: 0;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

flex-basis: 50%;

.item:nth-child(1) {
flex-basis: 50%;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

flex-basis: 300px

.item:nth-child(1) {
flex-basis: 300px
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

flex-basis: 10rem;

.item:nth-child(1) {
flex-basis: 10rem;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

flex-basis: content;

.item:nth-child(1) {
flex-basis: content;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

속성 값

flex-basis: auto;

:

flex item의 기본 크기를 자동으로 설정. 기본 값

flex-basis: 50%;

:

flex item의 기본 크기를 50%로 설정

flex-basis: 300px;

:

flex item의 기본 크기를 300px로 설정

flex-basis: content;

:

flex item의 기본 크기를 content 길이로 설정

flex-glow

flex-grow: 1;

.item:nth-child(1) {
flex-grow: 1;
}

.item:nth-child(2) {
flex-grow: 2;
}

.item:nth-child(3) {
flex-grow: 1;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

flex-grow: 0;

.item:nth-child(1) {
flex-grow: 0;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

속성 값

flex-grow: 1;

:

flex item의 flex-basis를 제외한 여백이 flex-grow에 지정한 ‘1’ 비율 만큼 표현한다.

flex-grow: 2;

:

flex item의 flex-basis를 제외한 여백이 flex-grow에 지정한 ‘2’ 비율 만큼 표현한다.

flex-grow: 0;

:

flex item의 flex-basis를 제외한 여백이 flex-grow에 지정한 ‘0’ 비율 만큼 표현한다. 여백 X. 기본값.

flex-shrink

flex-shrink: 1;

.item:nth-child(1) {
flex-basis: 10rem;
flex-shrink: 1;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

flex-shrink: 0;

.item:nth-child(1) {
flex-basis: 10rem;
flex-shrink: 0;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

속성 값

flex-shrink: 1;

:

flex item의 flex-basis를 보다 작아질 수 있게끔 표현한다. 기본값.

flex-shrink: 0;

:

flex item의 flex-basis를 보다 작아지지 않게 표현한다.

flex

flex: 1;

.item:nth-child(1) {
flex: 1;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

flex: 1 1 auto;

.item:nth-child(1) {
flex: 1 1 auto;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

 

flex: 1 500px;

.item:nth-child(1) {
flex: 1 500px;
}

기본 예시

flex item1

flex item2

flex item3

flex item4

flex item5

flex item6

flex item7

flex item8

flex item9

속성 값

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;

참고

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

W3C - CSS Flexible Box Layout Module Level 1

관련 포스트

반응형 디자인

grid 란?

flex 란? - 현재글

유동 이미지

미디어 쿼리

미디어 쿼리 – 다크 모드

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기