CSS flex 7가지 속성 요약 정리

 

CSS flex 요약 정리를 해보겠습니다.

 

flex는 flex box라고도 하며 grid와 함께 최신 CSS 기술로, CSS3에서 처음 등장하였습니다.

 

한 번 알아두면 전통적인 float나 table, column보다 편리하고 간결합니다. 또한 반응형 웹을 제작하는데에 뺄 수 없는 기술입니다.

 

다만 속성값이 많아서 처음에 헷갈릴 수 있는데, 이전 글들에서도 그랬듯 종류는 대략적으로 훑어보고 자주 쓰는 것들을 공유해보겠습니다.

flex의 구조

 

flex를 쓰려면 한 개 이상의 요소를 담고 있는 flex box가 있어야 합니다.

 

그리고 담겨 있는 요소들을 flex item이라고 합니다.

 

그러나 저런 용어는 개념 설명을 위한 것이고, 그냥 flex 레이아웃을 적용할 div와 그 안에 담긴 요소들이라고 이해하면 됩니다.

 

 

지난 글에서 display 명령들을 알아보았었는데요. flex와 grid를 제외한 기본 display 명령도 참고해보세요.

 

CSS float, display, visibility, opacity 요약 정리

 

flex box에서는 다음과 같이 안에 담긴 flex item들의 display 속성을 설정할 수 있습니다.

 

div{display: flex;}

 

• display: flex는 flex item들을 블록 타입으로 정의하는 경우입니다.
• display: inline-flex는 flex item들을 인라인 타입으로 정의하는 경우입니다.

 

저는 inline-flex를 쓸 일은 없었지만 그냥 이런 게 있다는 정도로 넘어가면 되겠습니다.

 

display: flex를 선언하면 지금부터 플렉스를 사용하겠다는 의미입니다. 이후에 아래 속성들을 설정해줍니다.

flex의 속성들

1. flex-direction

 

다음과 같이 플렉스 박스 안에서 아이템이 배치될 '방향'을 설정할 수 있습니다.

 

• row : 기본값입니다. 따로 정의하지 않아도 왼쪽에서 오른쪽으로 요소가 배치됩니다.
• row-reverse : 기본값과는 반대로, 오른쪽에서 왼쪽으로 요소가 배치됩니다.
• column : 위쪽에서 아래쪽으로 요소가 세로로 배치됩니다.
• column-reverse : 그냥 콜룸과는 반대 방향으로, 아래쪽에서 위쪽으로 요소가 배치됩니다.

 

 

2. justify-content

 

플렉스 요소의 수평 방향 정렬 방식을 설정합니다.

 

display: flex를 한 뒤에 가장 자주 쓰는 속성이니 꼭 알아두어야 합니다.

 

• flex-start : 기본값입니다. 시작점부터 요소를 배치합니다.
• flex-end : 뒤쪽에서부터 요소를 배치합니다.
• center : 가운데에서부터 요소를 배치합니다.
• space-between : 요소들 사이에만 여유 공간을 두고 요소를 배치합니다.
• space-around : 양옆과 요소들 사이에도 모두 여유 공간을 두고 요소를 배치합니다.

 

flex-direction과 약간 헷갈릴 수 있는데, 용도가 다릅니다.

 

방향은 수평과 수직 방향만을 설정하지만, justify-content는 방향에 따라 시작점과 뒤쪽에서 배치합니다.

 

또한 가운데부터 배치, 요소들 사이 여백을 두고 균일 배치, 양 옆과 요소들 사이 여백을 두고 균일 배치 등을 할 수 있습니다.

 

포토샵에서 일정한 간격을 두고 요소를 정렬하는 기능을 생각하면 쉽습니다.

 

 

3. align-items

 

위의 justify-content는 수평 방향 정렬이었습니다.

 

이번에 알아볼 align-items는 플렉스 요소의 수직 방향 정렬 방식을 설정합니다.

 

• stretch : 기본값입니다. 요소의 높이를 컨테이너의 높이와 같게 늘려서 배치합니다.
• flex-start : 컨테이너의 위쪽에 배치합니다.
• flex-end : 컨테이너의 아래쪽에 배치합니다.
• center : 컨테이너의 가운데에 배치합니다.
• baseline : 컨테이너의 기준선에 배치합니다.

 

stretch는 요소가 억지로 늘어나게 되므로 쓸 일이 없었고, 요소의 세로 정렬을 가운데로 맞추는 center를 주로 씁니다.

 

align-self라는 것도 있는데, 각각 요소에 다른 align 속성값을 설정할 수 있고 align-items 속성보다 우선적으로 적용됩니다. 

4. flex-wrap

 

wrap은 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지를 설정합니다.

 

참고로 wrap이라는 용어는 감싸는게 아니고, 플렉스 뿐 만 아니라 CSS에서 '줄바꿈'을 의미합니다.

 

 

지난 글에서 white-space: nowrap을 이용해서 글자 줄바꿈을 하지 않고 말줄임표를 쓰는 방법을 소개했으니 참고해보세요.

 

CSS position, z-index, overflow 요약 정리

 

다시 flex-wrap으로 돌아와서, 쓸 수 있는 속성값들을 알아보겠습니다.

 

• nowrap : 기본값. 요소가 다음 줄로 넘어가지 않습니다.
• wrap : 여유 공간이 없으면 다음 줄로 줄바꿈을 해서 요소를 배치합니다.
• wrap-reverse : 여유 공간이 없으면 다음 줄로 넘어가지만, 아래줄이 아닌 윗 줄로 넘어간다는 차이가 있습니다.

 

참고로 nowrap을 하면 줄바꿈을 하지 않지만, 대신 요소의 너비를 줄여 우겨넣는 식으로 배치하게 됩니다.

 

저는 wrap을 자주 쓰는데, 반응형 디자인 자체가 화면이 작아지면 줄바꿈을 하는 것이 자연스럽습니다.

 

 

반응형 디자인 패턴에는 보통 어떤 것들이 있는지는 지난 글에 정리해두었으니 확인해보세요.

 

반응형 웹사이트를 제작한다면 꼭 봐야할 사이트 모음

 

flex-flow라는 것도 있는데, flex-direction 속성과 flex-wrap 속성을 이용한 스타일을 한꺼번에 설정할 수 있습니다.

 

 

5. align-content

 

요소의 수직 방향 정렬을 하는 align-items과 비슷하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬한다는 차이가 있습니다.

 

justify-content의 세로 버전이라고 생각하면 쉽습니다.

 

• stretch : 기본값입니다. 플렉스 라인의 높이가 남는 공간을 전부 차지하게 됩니다.
• flex-start : 플렉스 라인은 플렉스 컨테이너의 앞쪽에 뭉치게 됩니다.
• flex-end : 플렉스 라인은 플렉스 컨테이너의 뒤쪽에 뭉치게 됩니다.
• center : 플렉스 라인은 플렉스 컨테이너의 가운데에 뭉치게 됩니다.
• space-between : 플렉스 라인은 플렉스 컨테이너에 고르게 분포됩니다.
• space-around : 플렉스 라인은 플렉스 컨테이너에 고르게 분포됩니다. 단, 양쪽 끝에 약간의 공간을 남겨둡니다.

 

만약 요소를 세로로 균일하게 배치하려면

 

flex-direction: column을 하고 align-content: space between이나 space around를 하면 됩니다.

 

6. order

 

order는 플렉스 요소들의 순서를 설정합니다.

 

flex를 했을 때 기본적으로 인식되는 아이템들의 순서와 다르게, 다음과 같이 인위적으로 순서를 정할 수 있습니다.

div{order: 4;}

디바이스에 따라 요소의 순서를 다르게해서, 표와 일반 가로 배치 등으로 각각의 레이아웃을 다르게 했던 적이 있습니다.

 

이 외에도 응용할 여지가 많은 기능 같습니다.

7. flex

 

flex 속성 중에 flex가 있다니 웃기죠.

 

이 속성은 컨테이너 안에 있는 요소의 너비를 상대적으로 설정해 줍니다.

 

쉽게 말해 100%의 영역이 있다고 할 때 요소 1은 20%, 요소 2는 40%, 요소 3은 40% 이렇게 영역을 나눠가지도록 설정이 가능합니다.

div나 ul와 같은 부모에 flex: 1을 하면 자식의 영역을 균일하게 배분합니다.

 

부모에 하지 않고 자식마다 3, 1, 1등으로 전체 영역에 대한 비율을 나눌 수도 있습니다.

 

 

 

이상으로 CSS flex 7가지 속성 요약 정리를 해보았습니다. 더 자세한 것들은 TCP 스쿨 사이트를 참고하세요. 읽어주셔서 감사합니다.