[CSS] Flex 속성 (Flexbox)

👾 Flex 속성이란?

CSS의 속성 중 하나로, 유연한 레이아웃을 만들기 위해 사용된다.
flex를 사용해 요소들을 가로 또는 세로로 배열하고, 크기를 유연하게 조절할 수 있다.

 

사용법과 실행 결과를 알아봅시다!

 

 

👾 flex-direction

flex 컨테이너 내의 아이템들이 배치되는 방향을 지정하는 데 사용한다.

 

▶ row

아이템들이 왼쪽에서 오른쪽으로 가로로 배치된다. (default)

display: flex; /* 속성을 지정하지 않으면, 기본값인 가로로 배치된다. */

display: flex;
flex-direction: row;

 

결과

 

▶ column

아이템들이 위에서 아래로 세로로 배치된다.

display: flex;
flex-direction: column;

 

cf)

row-reverse: 아이템들이 오른쪽에서 왼쪽으로 가로로 배치됨

column-reverse: 아이템들이 아래에서 위로 세로로 배치됨

 

 

👾 flex-wrap

flex 컨테이너 내의 아이템들이 한 줄에 모두 배치되지 않을 경우 어떻게 처리할지를 지정한다.

 

▶ nowrap

아이템들을 한 줄에 모두 배치하고, 줄 바꿈을 하지 않는다. (default)

display: flex;
flex-wrap: nowrap;

너비를 넘기면 잘려서 나온다.

 

 

▶ wrap

아이템들을 여러 줄에 걸쳐 배치한다. 첫 번째 아이템이 오른쪽 끝에 도달하면 다음 아이템은 다음 줄에 배치된다.

display: flex;
flex-wrap: wrap;

 

 

▶ wrap-reverse

아이템들을 여러 줄에 걸쳐 배치한다. 첫 번째 아이템이 왼쪽 끝에 도달하면 다음 아이템은 다음 줄에 배치된다.

display: flex;
flex-wrap: wrap-reverse;

 

 

👾 justify-content

flex 컨테이너 내의 아이템들을 주 축(main axis, 메인 축)을 따라 정렬하는 방법을 지정한다.

 

▶ flex-start

주 축의 시작 부분에 아이템들을 정렬한다.

display : flex;
justify-content: flex-start;

이해를 돕기 위해 배경색 설정

 

▶ flex-end

주 축의 끝 부분에 아이템들을 정렬한다.

display : flex;
justify-content: flex-end;

 

▶ center

주 축을 기준으로 아이템들을 가운데 정렬한다.

display : flex;
justify-content: center;

 

 

▶ space-between

첫 번째 아이템은 컨테이너의 시작 부분에, 마지막 아이템은 컨테이너의 끝 부분에 배치되고,

나머지 아이템들은 동일한 간격을 유지하며 나머지 공간에 배치된다.

display : flex;
justify-content: space-between;

 

 

▶ space-around

아이템들 사이에 동일한 간격을 유지하며 컨테이너의 시작과 끝 부분에는 반 간격만큼의 공간을 둔다.

display : flex;
justify-content: space-around;

 

 

▶ space-evenly

아이템들 사이와 주 축의 시작과 끝 부분에 동일한 간격을 유지한다.

display : flex;
justify-content: space-evenly;

 

 

👾 align-items

교차 축(수직 방향)에서 아이템들의 정렬 방식을 설정한다.

 

▶ flex-start

아이템을 교차 축의 시작 부분으로 정렬한다.

display : flex;
align-items: flex-start;

 

▶ flex-end

아이템을 교차 축의 끝 부분으로 정렬한다.

display : flex;
align-items: flex-end;

 

▶ center

아이템을 교차 축의 가운데로 정렬한다.

display : flex;
align-items: center;

 

▶ stretch

아이템을 교차 축의 전체 높이에 맞도록 늘린다.

display : flex;
align-items: stretch;

사진이 거의 정사각형이라 변화가 잘 안 보임

 

cf) 그 외 속성

align-content: 여러 줄에 대한 정렬을 다룸 (flex-start, flex-end, center, space-between, space-around, stretch 등)