웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

CSS display flex 사용방법 및 예제보기

Last Modified : 2020-10-13 / Created : 2018-12-28
10,175
View Count
다수의 엘리먼트 요소들을 더 쉽게 정렬하는 방법은 무엇일까요? css를 사용하여 레이아웃을 구성할때 많은 고민을 하게됩니다. 이때 flex를 사용하면 다른 방법보다 훨씬 더 쉽고 빠르게 쉽게 정렬 및 레이아웃을 하는 것이 가능합니다. 왜 flex를 써야할까요?

Why flex ?
각각의 요소들을 정렬하는데는 많은 것들을 고려해야합니다. 이때 flex는 정렬하고 포지션을 결정하는 등등의 많은 옵션들이 존재합니다. 쉽게 얘기하면 세로 정렬을 하는 것도... 그리고 한 줄에 원하는 박스 아이템을 원하는 방식으로 정렬할 수도 있죠...

하지만
 ...
예전에는 flex를 지원하지 않은 구 버전의 IE 환경을 고려해 사용하기 어려웠습니다. 하지만 최근에는 대부분의 브라우저가 flex를 지원하므로 더 이상 사용을 미룰 필요가 없어졌죠! 이제는 flex를 반드시 사용해야합니다.

그렇다면 flex의 모든 것을 알아보려합니다. 아래는 flex를 사용하여 배치, 정렬하는 방법과 몇 가지 예제를 알아보려고합니다.




# flex는 언제 사용해야 하는가

flex를 사용하는 경우는 하나가 아닌 다수의 엘리먼트를 정렬하는 경우입니다. 다수의 엘리먼트를 원하는 방향으로 또 원하는 형태로 손쉽게 정렬할 수 있죠. 또 하나... 또한 flex는 반드시 container 그리고 내부 요소 두 가지로 구분됩니다.

그럼 아래는 flex 레이아웃을 사용하는 방법을 하나씩 알아봅니다.

! display: flex 또는 inline-flex

플렉스를 사용하기 위해서 display의 값으로 flex 또는 inline-flex를 설정합니다. inline을 사용할 경우 내부 엘리먼트의 영역에 따라 width값이 달라지게 되는 차이가 있습니다.
display: flex;
display: inline-flex;


! 가로 또는 세로방향으로 나열하기, column, row

flex 내부에 위치할 각각의 flex 아이템들을 row 형태로... 또는 column 형태로 나열할 수 있습니다. 이때 나열의 방법으로 flex-direction을 사용합니다. 사용 가능 값은 column, row이며 세로 방향은 row... 그리고 가로 방향은 column을 설정해야합니다.

- 세로방향 정렬하기
flex-direction: column (기본값으로 설정되지 않는 경우 세로 정렬됨)
flex-direction: column-reverse // 세로 방향 정렬하되 순서는 반대로 정렬.

- 가로방향 정렬하기
flex-direction : row
flex-direction : row-reverse // 가로 방향이나 순서는 반대로 정렬

위의 값 중에 -reverse로 선언된 값을 볼 수 있습니다. 이 값을 사용하면 간단하여 flex 아이템 요소의 순서를 반대로 바꾸는 것이 가능합니다.


! container 내부 요소를 정렬하는 방법

컨테이너 내부에 위치할 각각의 flex 요소들을 세로 또는 가로로 어떻게 정렬할 것인지 설정해야합니다. 이 경우 justify-content와 align-items를 사용하여 정렬할 수 있습니다.

 
@ 세로방향 정렬하는 방법
align-items: center | baseline | flex-start | flex-end | stretch


! flex 가로방향으로 정렬하는 방법

가로 방향으로 정렬하는 경우 justify-contents 속성을 사용합니다. 선택 가능한 값은 아래와 같습니다.

justify-contents: center | flex-start | flex-end | space-around | space-between | space-evenly

하나씩 알아보면...

@ center
가운데 방향으로 모두 정렬됩니다.

@ flex-start
각각 아이템이 순서대로 좌측 시작 위치부터 정렬되어 우측에 여백이 남게 됩니다.

@ flex-end
각각 아이템이 우측 방향부터 정렬되어 좌측에 여백이 남게 됩니다.

@ space-evenly
좌우 및 아이템 사이의 간격을 모두 동일하게 유지하여 줍니다. 각각의 아이템을 정렬할 때 가장 이상적입니다. 다만 아이템이 하나가 모자란 경우 중간에 빈 큰 여백을 볼 수 있다는 단점이 있습니다.

@ space-between
가운데의 여백을 동일하게 가지도록 만듭니다. 좌, 우측 끝의 여백이 없습니다.



! flex item을 정렬할때 사용하는 몇 가지 프로퍼티

아래의 css 프로퍼티들은 flex를 설정 및 사용하는데 매우 중요합니다.

display
flex
flex-direction
flex-wrap
flex-scratch
flex-basis
justify-content
align-items
order


! flex 아이템 순서 정하기, order

flex 내부 아이템의 순서를 정할 수 있습니다. 이때 order 속성을 사용합니다.


order: 순서(Number; default. 0)


예를들어 3개의 flex childrens 요소가 있을 때 제일 마지막에 위치할 경우 order: 2를 사용할 수 있겠죠. html 내부에서 순서가 다르더라도 order를 사용해 순서를 바꿀 수 있다는 점이 매우 큰 장점입니다.
.last-item {
  order: 3;
}

이제 last-item 클래스명을 가진 엘리먼트는 맨 마지막에 위치하게 됩니다.


! Flex 엘리먼트의 크기 결정하기, flex-basis

flex-box의 내부에 위치한 각각의 flex 아이템들의 크기를 결정하는데 flex-basis를 사용합니다. flex-basis는 width처럼 동작하는데 만약 width와 함께 선언될 경우 flex-basis가 우선됩니다.

flex-bais의 값은 %, em, px 등을 사용하며 선택되지 않은 요소들은 자동으로 맞추어 나타나게됩니다.

flex-basis: 25%;


참고로 만약 flex-basis가 적용되었으나 설정된 값보다 크게 나타날 수 있습니다. 이 경우에는 내부 엘리먼트가 flex의 설정 값보다 크지는 않은지 확인해야합니다. 이런 경우 flex 요소가 자동으로 늘어나게 되므로 만약 flex-basis의 값대로 동작하지 않는 경우 영역을 넘는 자식 요소가 있는지 확인할 필요가 있습니다.



! flex-basis 예제보기

만약 각각 25%, 25%, 50% 비율의 flex 아이템을 한 줄에 정렬하는 레이아웃을 만드려면 아래와 같이 사용합니다.
@ flex-basis.html
<div class="flex-box">
  <div class="flex-item item1">1</div>
  <div class="flex-item item2">2</div>
  <div class="flex-item item3">3</div>
</div>

@flex-basis.css
.flex-box {
 display: flex;
}
.flex-item.item1 {
  flex-basis: 25%;
}
.flex-item.item2 {
  flex-basis: 25%;
}
.flex-item.item3 {
  flex-basis: 50%;
}



# CSS Flex 예제보기

flex는 예를들어 아래와 같이 사용합니다.
@ flex.html
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

@flex.css
.flex-container {
  display: flex;
  flex-direction: row;
}



! flex 아이템 줄바꿈이 설정하는 방법

flex 아이템들을 줄바꿈하는 방법으로 flex-wrap을 사용할 수 있습니다. 만약 flex 아이템 갯수가 많음에도 줄바꿈이 되지 않는다면 flex-warp이 설정되지 않아서입니다. flex-wrap은 아이템을 한 줄 또는 여러 줄로 랩핑하는 방법을 선택할 수 있습니다.

flex-wrap: wrap | wrap-reverse | nowrap

nowrap  //  정렬을 허용하지 않음. 즉 한 줄에 일렬로 나타남
wrap  //  여러 줄로 정렬되도록 설정함
wrap-reverse  //  여러 줄로 정렬하되 순서가 바뀌어 나타남



! 팁 및 정보

flex는 최신 브라우저는 모두 지원되나 IE 11 이상의 브라우저에서 사용가능합니다. 다만 최신 브라우저와 IE 11 사이의 계산 방식 차이 및 버그 등이 존재하여 정확하게 일치하는 레이어를 구현하는데 아직까지는 어느 정도의 어려움이 있을 수 있습니다.



! IE에서 width 크기가 달라지는 이슈

만약 IE 브라우저에서 flex를 사용한 child 요소에서 width 크기가 더 큰 경우가 나타날 수 있습니다. 이 경우 webkit 기반의 브라우저와 다르게 나타나는데 그 이유를 확인해보면 padding을 사용한 경우입니다.

해결 방법으로는 몇 가지가 존재하는데 각각의 child 요소에 max-width를 정해주거나 아니면 padding을 사용하지 않는 방법으로 해결할 수 있습니다. 정리하면...

1. child-element에서 padding을 제거한다
2. max-width를 설정한다.

padding을 사용하지 않는 것보다는 아무래도 max-width를 추가하여 수정하는 방법이 가장 무난한 해결방법입니다.

Previous

CSS Property margin

Previous

[CSS] 웹사이트에 Print 프린트, 인쇄 버튼 만들기