[CSS] Flex Box

 

 

 

 

🌼 오늘은 CSS의 꽃이라 불리는 Flexbox에 대해 알아보겠습니다. 🌼

 

 

 

 

 

 

 

1. Flexbox 사용하는 이유

flexbox가 등장하기 전에는 브라우저 상에서 요소들을 배치하기 위해 float 속성을 사용했습니다. float은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. float 속성의 값에는 left / none / right가 있습니다.

 

 

 

left는 이미지를 왼쪽에 배치하고 나머지 공간에 텍스트를 배치합니다.

 

 

 

float은 텍스트와 이미지를 배치하기 위한 속성으로, 텍스트와 이미지가 아닌 요소를 배치하기 위해 float를 사용하는 것은 의도에 맞지 않습니다. 그렇다면 어떤 속성을 사용해서 요소들을 유연하게 배치할 수 있을까요? 바로 flexbox 입니다. flexbox의 개념과 속성에는 무엇이 있는지 함께 살펴 봅시다.

 

 

 

 

 

2. Flexbox 기본 개념

 

flexbox 주요 개념

 

 

flexbox는 컨테이너와 아이템들을 자유자재로 행, 열에 배치할 수 있게 해줍니다. 예를 들어 컨테이너 안의 아이템들을 동일한 간격으로 배치하거나 원하는 기준으로 요소들을 정렬할 수 있습니다. flexbox를 제대로 이해하기 위해서는 현재의 중심축이 무엇인지 알아야 합니다. 요소들이 정렬되는 방향이 중심축(main axis)이 되고, 그 반대의 수직축이 반대축(cross axis)이 됩니다. flexbox에서의 또 다른 중요한 개념은 container와 item 입니다. container는 아이템들을 감싸고 있는 상위 요소를 의미하고, item은 container의 자식 요소를 의미합니다. 컨테이너와 아이템 각각에서 지정할 수 있는 속성에는 무엇이 있는지 알아 봅시다.

 

 

 

 

 

3. container 속성

display: flex가 설정된 부모 요소를 일컬어 flex container라고 합니다.

 

 

컨테이너에 지정할 수 있는 속성에는 다음이 있습니다.

 

* display

먼저 어떤 요소들을 flexbox로 레이아웃할 지 선택해야 합니다. 이를 위해 영향을 주고 싶은 요소의 부모 요소에 display 속성값을 flex라고 지정합니다.

.container {
  display: flex;
}

 

 

 

* flex-direction

flex-direction 속성은 자식 flexbox들이 컨테이너 내부에 배치되는 방향을 지정합니다. 기본값은 row이고 중심축(main axis)이 수평축이 됩니다. 아이템들이 컨테이너 내부에서 왼쪽에서 오른쪽 방향으로 배치됩니다.

 

 

flex-direction: column;

flex-direction을 column으로 설정하면 중심축이 수직축이 되고, 아이템들이 컨테이너 내부에서 위에서 아래 방향으로 배치됩니다.

 

 

📍 참고
row-reverse와 column-reverse 속성값을 사용하여 역방향으로 배치할 수 있습니다.
row-reverse는 아이템들이 오른쪽에서 왼쪽으로 배치되고 column-reverse는 아이템들이 아래에서 위로 배치됩니다.
(두 속성 모두 아이템들의 순서가 뒤바뀝니다.)

 

 

 

* flex-wrap

기본값은 no-wrap으로, 창의 크기에 상관없이 아이템들이 한 줄에 빼곡히 배치됩니다.

 

flex-wrap: wrap;

속성값을 wrap으로 설정하면 창의 크기에 따라 아이템들이 자동으로 다음 라인으로 넘어가도록 배치됩니다.

 

 

 

* flex-flow

flex-direction과 flex-wrap을 한 줄로 작성할 수 있습니다.

 

 

아래의 코드를

flex-direction: row;
flex-wrap: wrap;

 

 

다음으로 대체할 수 있습니다.

flex-flow: row wrap;

 

 

 

* justify-content

중심축을 기준으로 아이템들을 어떻게 배치할 지를 결정합니다. 기본값은 flex-start로, 아이템들을 왼쪽에서 오른쪽 방향으로 배치합니다.

 

 

justify-content: flex-end;

flex-end 속성값은 정해진 위치의 반대 위치에서부터 정렬됩니다. 이 때, 아이템들의 순서는 원본을 유지합니다.

 

 

 

justify-content: center;

center 속성값은 아이템들이 중심축의 중앙에 정렬됩니다.

 

 

 

justify-content: space-around;

space-around 속성값은 처음과 끝에 위치한 아이템을 제외한 그 사이의 아이템들이 같은 간격을 유지하며 배치됩니다.

 

 

 

justify-content: space-evenly;

space-evenly 속성값은 모든 아이템들의 간격이 동일하게 배치됩니다.

 

 

 

justify-content: space-between;

space-between 속성값은 처음과 끝에 위치한 아이템은 컨테이너의 양쪽 끝에 배치되고, 그 사이의 아이템들은 같은 간격을 유지하며 배치됩니다.

 

 

* align-items

반대축을 기준으로 아이템들을 어떻게 배치할 지 결정합니다. 기본값은 strech로, 아이템들이 컨테이너 크기에 맞게 연장됩니다.

 

 

 

align-items: center;

center 속성값은 아이템들이 반대축의 중앙에 정렬됩니다.

 

 

 

align-items: baseline;

baseline 속성값은 아이템들의 크기가 다르더라도 모든 아이템들의 텍스트 위치가 동일하게 배치됩니다.

 

 

 

* align-content

반대축을 기준으로 아이템을 어떻게 배치할 지 결정합니다. 중심축을 기준으로 아이템들을 배치하는 justify-content와 동일한 속성값을 가집니다.

 

 

 

 

 

4. item 속성

flex container 내부에 flexbox로 레이아웃되는 항목을 일컬어 flex item이라고 합니다.

 

 

아이템에 지정할 수 있는 속성에는 다음이 있습니다.

 

* order

아이템의 순서를 바꿀 수 있습니다. 모든 flex item들의 기본값은 0입니다. 많이 사용되지 않는 속성으로, 아이템들의 순서를 바꾸고 싶다면 HTML 코드 내에서 수정합니다.

 

 

 

* flex-grow

창의 크기가 커질 때 아이템들이 지정된 숫자만큼 컨테이너의 공간을 채웁니다. 모든 flex item들의 기본값은 0으로, 창의 크기에 상관없이 아이템들의 크기가 일정합니다.

 

 

.item1 {
  flex-grow: 2;
}

.item2 {
  flex-grow: 1;
}

.item3 {
  flex-grow: 1;
}

창의 크기가 커짐에 따라 item1의 크기가 item2와 item3 크기의 2배만큼 커집니다.

 

 

 

* flex-shrink

창의 크기가 작아질 때 아이템들이 지정된 숫자만큼 컨테이너의 공간을 채웁니다. 모든 flex item들의 기본값은 0으로, 창의 크기에 상관없이 아이템들의 크기가 일정합니다.

 

 

.item1 {
  flex-shrink: 2;
}

.item2 {
  flex-shrink: 1;
}

.item3 {
  flex-shrink: 1;
}

창의 크기가 작아짐에 따라 item1의 크기가 item2와 item3 크기의 2배만큼 작아집니다.

 

 

 

* flex-basis

아이템들이 컨테이너의 공간을 얼만큼 차지해야 하는지를 결정합니다. 기본값은 auto로, flex-grow와 flex-shrink에 지정된 값에 따라 변형됩니다.

 

 

.item1 {
  flex-basis: 60%;
}

.item2 {
  flex-basis: 30%;
}

.item3 {
  flex-basis: 10%;
}

창의 크기가 변함에 따라 item1, item2, item3의 비율이 6:3:1로 변형됩니다.

 

 

 

* flex

flex-grow, flex-shrink, flex-basis를 한 줄로 작성할 수 있습니다.

 

 

 

아래의 코드를

.item1 {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: auto;
}

 

 

다음으로 대체할 수 있습니다.

.item1 {
  flex: 2 2 auto;
}

 

 

 

* align-slef

하나의 아이템만 따로 정렬할 수 있습니다.

 

 

.item1 {
  align-self: center;
}

item1만 반대축을 기준으로 중앙 정렬됩니다.

 

 

 

 

 

5. Flexbox 연습

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

flexbox의 개념과 container, item 각각에서 지정할 수 있는 속성에 대해 알아 보았습니다.

귀여운 게임을 통해 flexbox를 잘 이해했는지 확인해 보세요! 🐸