여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. flex 란?
flex 란?
8개월전 작성
8개월전 수정

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

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

flex

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

기본 레이아웃

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

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

기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

HTML
<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>
CSS
.container {
display: flex;
/* display: inline-flex; */
}

CSS로 레이아웃 배치

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

배치 방향 설정하는 방법

flex-direction: row;
.container{
flex-direction: row;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

flex-direction: row-reverse;
.container{
flex-direction: row-reverse;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

flex-direction: column;
.container{
flex-direction: column;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

flex-direction: column-reverse;
.container{
flex-direction: column-reverse;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9
속성 값
flex-direction: row;
:
flex item들이 행(가로)로 왼쪽 » 오른쪽 배치된다.
flex-direction: row-reverse;
:
flex item들이 행(가로) 역순으로 오른쪽 » 왼쪽 배치된다.
flex-direction: column;
:
flex item들이 열(세로)로 위 » 아래 배치된다.
flex-direction: column-reverse;
:
flex item들이 열(세로) 역순으로 아래 » 위 배치된다.

줄 넘김하는 방법

flex-wrap
flex-wrap: nowrap;
.container{
flex-wrap: nowrap;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

flex-wrap: wrap;
.container{
flex-wrap: wrap;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

flex-wrap: wrap-reverse;
.container{
flex-wrap: wrap-reverse;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9
속성 값
flex-wrap: nowrap;
:
줄바꿈 하지 않고 넘치면 삐져나간다.
flex-wrap: wrap;
:
줄바꿈을 하고 flex item 순서대로 배치한다.
flex-wrap: wrap-reverse;
:
줄바꿈을 하고 flex item 역순으로 배치한다.

flex item을 정렬

속성
justify-content
:
flex container에서 사용하며 flex item을 가로 방향으로 정렬한다.
align-items
:
flex container에서 사용하며 flex item을 세로 방향으로 정렬한다.
align-content
:
flex container에서 사용하며 flex item을 그룹화하여 그룹화한 세로 사이즈가 flex container 세로 사이즈보다 작은경우 그룹을 세로 방향으로 정렬한다.
align-self
:
flex item에서 사용하며 이 속성을 넣은 flex item을 세로 방향으로 정렬한다.
justify-content
justify-content: flex-start;
.container {
justify-content: flex-start;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

justify-content: flex-end;
.container {
justify-content: flex-end;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

justify-content: center;
.container {
justify-content: center;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

justify-content: space-between;
.container {
justify-content: space-between;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

justify-content: space-around;
.container {
justify-content: space-around;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

justify-content: space-evenly;
.container {
justify-content: space-evenly;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9
속성 값
justify-content: flex-start;
:
flex item들을 모두 그룹화하여 가로로 왼쪽 정렬한다.
justify-content: flex-end;
:
flex item들을 모두 그룹화하여 가로로 오른쪽 정렬한다.
justify-content: center;
:
flex item들을 모두 그룹화하여 가로로 가운데 정렬한다.
justify-content: space-between;
:
flex item들을 모두 그룹화하여 가로로 양 옆에는 여백 없이 가운데에만 여백을 두고 정렬한다.
justify-content: space-around;
:
flex item들을 모두 그룹화하여 가로로 각 flex item 마다 여백을 양쪽 옆으로 똑같이 두고 정렬한다.
justify-content: space-evenly;
:
flex item들을 모두 그룹화하여 가로로 모든 여백을 똑같이 두고 정렬한다.
align-items
align-items: stretch;
.container {
align-items: stretch;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

align-items: flex-start;
.container {
align-items: flex-start;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

align-items: flex-end;
.container {
align-items: flex-end;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

align-items: center;
.container {
align-items: center;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9

 

align-items: baseline;
.container {
align-items: baseline;
}
기본 예시
flex item1
flex item2
flex item3
flex item4
flex item5
flex item6
flex item7
flex item8
flex item9
속성 값
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;
참고
관련 포스트
flex 란? - 현재글
Mingg`s Diary
밍구
공부 목적 블로그