다수의 엘리먼트 요소들을 더 쉽게 정렬하는 방법은 무엇일까요? 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 | nowrapnowrap // 정렬을 허용하지 않음. 즉 한 줄에 일렬로 나타남
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를 추가하여 수정하는 방법이 가장 무난한 해결방법입니다.