다수의 엘리먼트 요소들을 더 쉽게 정렬하는 방법은 무엇일까요? 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

@ 가로방향으로 정렬하는 방법
justify-contents: center | flex-start | flex-end | space-around | space-between



! flex item을 정렬할때 사용하는 몇 가지 프로퍼티아래의 css 프로퍼티들은 flex를 설정 및 사용하는데 매우 중요합니다.

display
flex
flex-direction
flex-wrap
flex-scratch
flex-basis

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-wrap: wrap | wrap-reverse | nowrap

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



! 팁 및 정보flex는 최신 브라우저는 모두 지원되나 IE 10 이하는 지원하지 않으며 10에서만 일부 지원합니다.