[CSS] Flexbox란?

개요

프로젝트 템플릿 코드를 분석하면서 자꾸 flex라는 단어가 나오는데 이게 도대체 어떻게 사용하는거지 알 수가 없어서, 정리하고자 한다.

 

1. Flexbox란?

CSS의 레이아웃을 구성하는 도구 중 하나로, 컨테이너 내부의 요소들을 효율적으로 정렬하고 배치할 수 있도록 도와준다.

기존에 사용하던 float, inline-block과 같은 레이아웃 방식보다 유연성이 뛰어나고, 다양한 화면 크기에 대응하기가 쉽다.

특징 

1) 자동 크기 조절

-> 아이템 크기가 자동으로 조정된다.

 

2) 반응형 레이아웃

-> 다양한 화면 크기에 적용할 수 있다.

 

3) 간편한 정렬

-> 중앙 정렬, 간격 조정 등이 쉽게 가능하다.

 

4) 아이템 순서 변경 가능

-> HTML 구조를 변경하지 않고도 아이템 순서를 조정할 수 있다.

 

Flexbox는 부모 요소(Flex Container)와 자식 요소인(Flex Item)로 구성된다.

 

Flex Container

부모 요소에 display: flex; 또는 display: inline-flex;를 설정해서 적용한다. 이 컨테이너 안의 자식 요소들은 자동으로 플렉스 아이템이 된다.

.container {
    display: flex;
 }

 

: display : flex;

-> 블록 요소의 역할을 하며 내부 아이템을 정렬한다.

 

: display : inline-flex;

-> 인라인 요소로 작동하며 내부 아이템을 정렬한다.

 

Flex Items

-> 플렉스 컨테이너 내부의 요소들은 자동으로 플렉스 아이템이 되고, 여러 속성을 통해 크기 조절과 정렬이 가능하다.

 

2. Flexbox 속성

2-1. Flex Container 속성

flex-direction

-> flex item의 주축(main axiss)을 설정한다. 기본값은 row이고, 변경시 요소의 배치 방향이 달라진다.

-> row(기본값) : 가로 정렬 (왼쪽 -> 오른쪽)

-> row-reverse : 가로 정렬 (오른쪽 -> 왼쪽)

-> column : 세로 정렬(위 -> 아래)

-> column-reverse : 세로 정렬(아래 -> 위)

 

.parent {
  display : flex;
  flex-direction : row;
}

 

 

.parent {
  display : flex;
  flex-direction : column;
}

 

-> 이런식으로 주축이 바뀌게 된다.

 

justify-content

-> flex item을 주축(main axis)을 기준으로 정렬한다.

 

: flex-start (기본값)

-> 아이템을 시작점에 정렬

 

: flex-end

-> 아이템을 끝점에 정렬

 

: center

-> 중앙 정렬

 

: space-between

-> 첫 번째와 마지막 요소는 양 끝에 배치, 나머지는 고른 간격 유지

 

: space-around

-> 모든 요소에 동일한 여백 적용

 

: space-evenly

-> 모든 요소 사이의 간격을 균등하게 배치

 

.parent {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

 

 

align-items

-> flex item을 교차 축(cross axis)을 기준으로 정렬한다.

 

: stretch (기본값)

-> 컨테이너 높이 또는 너비에 맞춰 늘어난다.

 

: flex-start

-> 교차 축 기준으로 시작점 정렬

 

: flex-end

-> 교차 축 기준으로 끝점 정렬

 

: center

-> 중앙 정렬

 

: baseline

-> 텍스트 기준선에 맞춰 정렬

 

.parent {
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

 

 

-> 둘다 center로 맞춰놓으면 세로와 가로 모두 가운데 정렬하게 된다.

 

flex-wrap

-> 플렉스 아이템들이 컨테이너를 넘칠 경우 여러 줄로 감싸질지 여부를 결정한다.

 

: nowrap (기본값)

-> 한 줄에 모두 배치

 

: wrap

-> 여러 줄로 배치

 

: wrap-reverse

-> 역순 여러 줄로 배치

 

.parent {
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

 

 

 

gap

 

내부 요소들 사이에 들어가는 공백의 크기를 지정하는 것으로, 단위를 em으로 사용한다.

2-2. Flex Item 속성

-> 플렉스 아이템의 경우 개별적으로 크기와 정렬을 조정할 수 있다.

 

flex-grow

-> 아이템의 성장 비율을 지정한다.

-> 기본값은 0이며, 1이상이면 남은 공간을 해당 비율만큼 차지한다.

 

적용X

 

적용O

flex-shrink

-> 아이템의 축소 비율을 지정한다.

-> 기본값은 1이고, 0으로 설정하면 축소되지 않는다.

 

flex-basis

-> 아이템의 기본 크기를 설정한다.

 

algin-self

-> 개별적인 아이템의 교차 축 정렬을 지정한다.