다수의 엘리먼트 요소들을 더 쉽게 정렬하는 방법은 무엇일까요? css를 사용하여 레이아웃을 구성할때 많은 고민을 하게됩니다. 이때 flex를 사용하면 다른 방법보다 훨씬 더 쉽고 빠르게 쉽게 정렬 및 레이아웃을 하는 것이 가능합니다. 왜 flex를 써야할까요?

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

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

그렇다면 flex의 모든 것을 알아보려합니다. 아래는 flex를 사용하여 배치, 정렬하는 방법과 몇 가지 예제를 알아보려고합니다.
# flex는 언제 사용해야 하는가flex를 사용하는 경우는 하나가 아닌 다수의 엘리먼트를 정렬하는 경우입니다. 다수의 엘리먼트를 원하는 방향으로 또 원하는 형태로 손쉽게 정렬할 수 있죠. 또 하나... 또한 flex는 반드시 container 그리고 내부 요소 두 가지로 구분됩니다.


! container 내부 요소를 정렬하는 방법
컨테이너 내부 요소들은 세로 또는 가로로 정렬할 수 있으며 이때 각각의 내부 요소들을 어떻게 정렬할 것인가가 가장 중요합니다. 먼저 세로 및 가로 방향으로 정렬하는 방법입니다.

@ 가로 또는 세로방향으로 정렬하기
세로 또는 가로 정렬의 방법으로 flex-direction을 사용합니다. 사용 가능 값은 column, row이며 세로 방향은 row... 그리고 가로 방향은 column을 설정해야합니다.

- 세로방향 정렬하기
flex-direction: column (기본값으로 설정되지 않는 경우 세로 정렬됨)

- 가로방향 정렬하기
flex-direction : row


@ 세로방향 정렬하는 방법
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



# 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 사이의 계산 방식 차이 및 버그 등이 존재하여 정확하게 일치하는 레이어를 구현하는데 아직까지는 어느 정도의 어려움이 있을 수 있습니다.