Flexbox

늘 염두에 두고 있었지만 제대로 공부해본 적 없던 Flexbox를 이번 기회에 확실히 정리해보고자 한다.

그동안 주로 대학교와 관공서 프로젝트를 진행했기에 IE 구 버전 대응 이슈 때문에 사내 프로젝트에서 Flexbox의 사용을 지양해왔었는데, 타 회사들의 작업물을 살펴보면서 여러 비효율적이고 구시대적인 CSS 정렬 방법을 Flexbox로 간편하게 해결할 수 있다는 걸 느꼈다.

또, 이 기술이 나온 지 시간이 꽤 흘러서인지 예전보다 크로스 브라우징의 어려움이 많이 없어졌고 꽤 많은 국내 사이트들에서도 Flexbox를 사용하고 있다.

먼저 Flexbox의 기본 기능을 공부해보고, 간단한 페이지를 만들어 Flexbox로 레이아웃을 구축해보기로 한다.

나아가 사내 프로젝트에서도 팀원들과 이야기하여 작은 컴포넌트 단위에서부터 Flexbox를 적용해보기로 하였으니 실무에 적용할 수 있는 부분부터 차근차근 공부해보자.

Flexbox Froggy 🐸

https://flexboxfroggy.com/#ko

Flexbox를 이용해 개구리를 연꽃잎 위에 올리는 굉장히 유명한 게임이다. 기존에 Flexbox를 한번도 사용해보지 못한 사용자들이 Flexbox 속성을 시각적으로 확인하면서 쉽게 익힐 수 있도록 도와준다.

Flexbox ✨

Main axis & Cross axis

플렉스 박스에는 중심축과 추가축이 존재

플렉스 박스(flex box)를 꾸며주는 속성

flex-direction

플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정

---

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

justify-content, align-items 그리고 flex-direction의 관계

• column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀝니다.
• Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 방향이 가로로 바뀝니다.

flex-wrap

플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길 지를 설정

---

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex-flow

flex-direction과 flex-wrap을 묶어서 한 번에 사용하는 속성

E.g :

flex-flow: row wrap;

justify-content

플렉스 요소의 수평 방향 정렬 방식을 설정

---

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

space-between과 space-around의 차이점

• space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치됩니다.
• space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치됩니다.

align-items

플렉스 요소의 수직 방향 정렬 방식을 설정

---

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

align-content

여러 줄 사이의 간격을 설정 (한 줄만 있는 경우 효과 없음)

---

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

플렉스 요소(flex item)를 꾸며주는 속성

order

• 기본 값 : 0
• 양수나 음수를 사용해 플렉스 요소의 순서를 개별적으로 변경
• 현업에선 거의 사용하지 않음

flex-grow

컨테이너가 늘어날 때 어떠한 비율로 공간을 차지할지를 결정

flex-shrink

컨테이너가 줄어들 때 어떠한 비율로 공간을 차지할지를 결정

flex-basis

컨테이너 증/감에 따라 어떠한 비율로 공간을 차지할지 결정

align-self

• align-items가 사용하는 값들을 인자로 받아 개별 요소에 적용 (컨테이너에 지정된 정렬 방식을 벗어나서 특정 아이템만 정렬을 달리하고 싶을 경우 사용)
• align-items보다 우선 적용

flex

같은 플렉스 컨테이너 안에 있는 플렉스 요소의 너비를 상대적으로 설정

.item:nth-child(1) { -webkit-flex: 3; flex: 3; }
.item:nth-child(2) { -webkit-flex: 1; flex: 1; }
.item:nth-child(3) { -webkit-flex: 1; flex: 1; }

위 예시에서 첫 번째 플렉스 요소는 전체 너비의 3/5을 차지하며, 나머지 두 요소는 각각 전체 너비의 1/5씩을 차지

참고

---

• Dream Coding Youtube : https://youtu.be/7neASrWEFEM
• MDN - Flexbox : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
• TCP School : http://www.tcpschool.com/css/css3_expand_flexbox
• Color Tool : https://material.io/resources/color/#!/?view.left=0&view.right=0
• Material Design : https://material.io/
• CSS Tricks - Flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/