Flexbox의 모든 것 (display: flex)

Flexbox란?

Flexbox는 아이템들을 행 또는 열로 자유자재로 배치시킬 수 있는 정말 정말 유연한 녀석입니다.

CSS의 꽃이라고 불리는 Flexbox 녀석을 오늘 자세하게 뜯어보겠습니다.

 

ex)

• 박스가 커지면 박스 속의 각각의 아이템들이 어떤 식으로 커지면서 박스의 공간을 메워야 하는지
• 박스가 작아지면 박스 속의 아이템들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 하는지

위의 두 가지를 자유롭게 정의할 수 있고 너무너무 쉽게 이 모든 것들을 가능하게 해주는 것이 바로

“Flexbox”입니다.

 

flexbox만 잘 이해하셔도 웹사이트의 layout을 아주 쉽게 구성할 수 있습니다.

너무나 쉽고 간단한 flexbox… 저와 같이 오늘 부숴버리도록 해보겠습니다.

 

---

예전에는 position, float, table을 이용하여 주로 layout을 했었습니다.

하지만, 너무 복잡하고 시간도 많이 소모되었습니다. 위의 아이들로는 할 수 없는 것도 있었습니다.

출처: 드림코딩

• 박스 안에 아이템들을 수직적으로 가운데 정렬하는 것
• 아이템들의 사이즈에 관계없이 동일한 간격으로 동일한 사이즈로 박스 안에 배치하는 것
• 박스를 동일한 높이로 놔두는 것

float이나 table로 위의 것들을 처리하기에는 조금 까다로웠습니다.

 

하지만, 이제 flexbox를 통해서 위의 것들을 아주 손쉽게 할 수 있게 되었습니다.

float의 원래 목적은 이미지와 텍스트를 어떻게 배치할 것인지 정의하는 것입니다.

float 속성(출처: 드림코딩)

하지만 아까 위에서 언급한 것들을 처리하기 위해 본래의 목적에서 벗어난 방법들로 사용되고는 했습니다.

 

---

Flexbox가 등장한 이후, 다시 float은 본래의 목적으로 사용되었고

Flexbox는 단 2가지만 이해하면 큰 그림을 이해할 수 있습니다.

 

Flexbox는 박스/Container에 적용되는 속성값들이 존재합니다.

그리고 각각의 item들에 적용되는 속성값들이 존재합니다.

일반적인 Flexbox 구조(출처: 드림코딩)

 

Container에 꾸며줄 수 있는 속성값들에는

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

 

Item에 적용할 수 있는 속성값에는

• order
• flex-grow
• flex-shrink
• flex
• align-self

---

두 번째로 중요한 컨셉은 flexbox에는 중심축과 반대축이 있습니다.

중심축과 반대축 (출처: 드림코딩)

• 중심축(main axis)을 지정하면 나머지 축이 자동으로 반대축(cross axis)이 됩니다.
• 위의 사진에서는 아이템들이 수평으로 정렬되고 있습니다.
  • 그래서 수평축이 중심축이 됩니다.
  • 나머지 축이 반대축이 됩니다.

중심축과 반대축 수직ver(출처: 드림코딩)

• 반대로 아이템들이 수직으로 정렬되어 있기 때문에 수직이 이제는 main axis가 됩니다.
• 그리고 나머지 축이 cross axis가 됩니다.

그래서 내가 중심축을 수평으로 설정하느냐 수직으로 설정하느냐에 따라 반대축이 결정됩니다.

---

이제 실습을 통해서 flexbox에 대해 완벽하게 이해해 봅시다. (jsbin.com에서 실습 가능.)

flexbox 실습 세팅

• 위의 코드를 보면 container 속에 10개의 item들이 있는 것을 확인할 수 있다.
• 위의 코드를 일일이 쓰지 않고 div.container>div.item.item${$}*10이라고 입력하고 tab을 누르면 자동완성이 된다.

• 100% vs 100vh
  • 100% container가 들어있는 부모의 높이의 100%를 채우겠다는 의미이다.
  • 그래서 위에서 height을 100%으로 변경하면 아래와 같이 나온다.

• 그럼 100%를 유지하고 이전 상태로 설정하고 싶다면 body에도 100%로 설정을 해본다
• body에서 100%를 설정했을 때 안된다면 html이 현재 100%가 아니기 때문이다.
• 그래서 body와 html 모두 100%로 해준다면 이전과 같은 상태가 된다.
• 부모와 상관없이 보이는 것의 viewport를 다 쓰겠다고 한다면 100vh라고 작성한다.
  • 만약, 80% 사용하겠다고 하면 80vh라고 작성하면 된다.

---

아이템 크기 조정

초기 세팅

---

Container 속성값들

flex

flex 예시

• display: flex를 추가하면 자동으로 아이템들이 왼쪽에서 오른쪽으로 정렬이 된다.

---

flex-direction

기본값은 row입니다. 왼쪽에서 오른쪽으로 가는 열을 의미합니다.

row-reverse라고 적게 되면 오른쪽에서 왼쪽으로 정렬합니다.

flex-direction 예시

• 여기서 중심축은 x축이 됩니다.
• 만약 중심축을 바꾸고 싶다면 column을 입력하면 됩니다.

flex-direction: column 예시

마찬가지로 column-reverse라고 적게 되면 아래에서 위로 올라오게 됩니다.

column-reverse 적용

• 이제 메인축은 수직축이 됩니다.

---

flex-wrap

기본값은 nowrap입니다.

flex-wrap:nowrap 예시

• 기본적으로 창이 작아져도 한 줄이 모두 붙어있는 것을 확인할 수 있습니다.

flex-wrap을 wrap으로 설정하면 아래와 같이 나뉘게 되는 것을 확인할 수 있습니다.

자동으로 다음 라인으로 넘어갑니다.

flex-wrap: wrap 적용

wrap-reverse로 설정하면 거꾸로 되는 것을 확인할 수 있습니다.

 

flex-wrap: wrap-reverse 적용

border에서 3가지를 단축해서 한 줄에 적을 수 있습니다.

• border-width
• border-style
• border-color

단축 결과

flex-flow

flex-flow도 마찬가지로 flex-direction과 flex-wrap을 합한 것입니다.

flex-flow 적용 예시

• 위와 같이 한 번에 작성할 수 있다.

---

지금까지 flex박스로 보여주고 전체적인 방향, 내가 수평이 중심축인지 수직이 중심축인지 결정을 하고 한 줄에 가득 차면 넘어가게 할 것인지 안 할 것인지 알아봤습니다.

 

다음으로 알아볼 것은 아이템들을 어떻게 배치할 것인지 알아봅시다.

---

justify-content

justify-content는 중심축에서 아이템들을 어떻게 배치할 것인지 결정해 줍니다.

 

 

flex-start 기본값

처음부터 왼쪽에서 오른쪽으로

수직축이 중심축이라면 위에서 아래로

 

flex-end

아이템의 순서는 유지하되 오른쪽으로 아이템을 배치한다.

만약 flex-direction이 column이게 되면 밑에서부터 배치를 하게 됩니다. (순서는 위에서 아래로)

하지만, flex-direction에 column-reverse를 작성하면 밑에서부터 배치를 하되 순서는 역전됩니다.

 

center

아이템들을 center에 맞춰서 배치하게 됩니다.

 

space-around

박스(아이템)를 둘러싸게 space를 넣어주는 것이다.

가운데 아이템들은 왼쪽의 space와 오른쪽의 space를 합하여 조금 더 넓은 공간이 있음을 확인할 수 있습니다.

 

space-evenly

똑같은 간격을 넣어준 것을 말합니다.

 

space-between

중간(아이템 사이)에만 공간을 넣어주는 것을 말합니다.

space-between 예시

---

align-items

반대축에서 아이템들을 어떻게 배치할 것인지 결정해 줍니다.

 

 

center

아이템들을 수직적으로 중심이 놓고 싶다고 한다면 사용한다.

align-items: center 예시

 

baseline

align-items: baseline 예시

• text가 모두 다 동일하고 균등한 위치에 설정해 주는 효과가 있습니다.

---

align-content

justify-content와 유사하지만 반대축의 아이템들을 지정하게 됩니다.

justify-content의 속성들은 모두 사용할 수 있습니다.

 

 

center

align-content: center 예시

• 중간으로 아이템들이 모여서 배치되는 것을 확인할 수 있다.

---

어떤 속성들이 있는지는 잘 기억을 못 해도 괜찮습니다.

찾아가면서 하면 되기 때문입니다.

제일 중요한 key point는 큰 개념을 내가 이해하고 있느냐 없느냐입니다.

 

아래의 사이트에서 참고하면 됩니다:)

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

 

---

Item 속성값들

초기 세팅

order

item에 order를 지정할 수 있습니다.

기본값은 0으로 설정되어 있습니다.

아래와 같이 item의 순서를 변경할 수 있습니다.

order 예시

• 엘리선생님은 현업에서 일하면서 order를 바꾼 적은 한 번도 없다고 함..ㅠ
• 잘 쓰이지는 않지만 이런 것이 있다고 생각하면 될 것 같습니다.

 

flex-grow

매우 중요한 속성입니다.

아이템은 원래 고유한 크기를 유지하려고 합니다.

하지만, flex-grow를 사용하면

컨테이너를 꽉 채우기 위해 아이템이 늘어납니다.

기본값은 0입니다.

flex-grow 예시

• 첫 번째 아이템만 flex-grow를 1로 지정했기 때문에 두 번째와 세 번째는 컨테이너를 채우려는 노력을 하지 않습니다. 고유한 사이즈를 유지합니다.
• 하지만, 모두 flex-grow를 준다면? 아래와 같이 됩니다.

균등하게 모두 1로 설정

• 첫 번째 것에 flex-grow: 2라고 세팅하면 두 번째와 세 번째보다 2배로 커지게 됩니다.

 

flex-shrink

컨테이너가 점점 작아졌을 때, 어떻게 행동하냐는 지정 합니다.

기본값은 0입니다.

shrink는 아이템들의 사이즈가 바뀌었을 때, 얼마나 어떻게 더 줄어들고 늘어나야 되는지를 정리하는 녀석입니다.

flex-shrink 예시

 

flex-basis

아이템들이 공간을 얼마나 차지해야 하는지 조금 더 세부적으로 명시할 수 있도록 도와주는 녀석입니다.

기본값은 auto입니다.

auto로 하면 grow나 shrink에 지정된 것에 맞춰서 변형되지만 grow나 shrink를 쓰지 않고 지정하면 알아서 설정해 줍니다. 아래에서 확인해 보시죠!

flex-basis 예시

 

align-self

컨테이너 레벨에서는 justify-content, align-items, align-content를 통해서 아이템들을 골고루 배치할 수 있었다면 align-self를 이용해서 아이템별로 아이템들을 정렬할 수 있습니다.

예를 들어, 아이템 하나만 center로 맞추고 싶다. 그러면 아래와 같이 하면 됩니다.

align-self 예시

• 그리고 flex도 축약할 수 있습니다.

---

실전에서 쓰기 부족하다면 

flexbox froggy 게임을 통해서 연습해 봅시다!

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

글이 많이 길었지만 도움이 됐기를 바랍니다:)