display: flex;에 대해 알아봅시다

오늘은 display: flex;에 대해 알아보겠습니다.
최종적으로는 flex를 통해 display: gird;를 소개해드리는 것이 목표입니다.
grid에 관한 설명은 다음 글에서 이어서 하겠습니다.

grid를 이해하기 위해서는 먼저 flex를 이해해야합니다.
flex는 가로나 세로로 컨텐츠를 배치할 수 있는 CSS 속성입니다.
1차원(선)이 flex, 2차원(면)이 gird라고 이해하면 편합니다.
그러나 flex-wrap을 사용해서 flex도 면과 같이 사용할 수 있고 grid도 1차원적으로만 사용할 수 있기 때문에 정확한 설명은 아닙니다.

flex 이전에는 float라는 속성을 사용했습니다.
float: right; float: left;를 사용해서 컨텐츠를 좌에서 우로, 우에서 좌로 흐를 수 있도록 했었지요.
가끔 옛날 코드를 건들 일이 있을 수 있으니 float는 인지만 하고 넘어가시면 됩니다.

---

flex를 이해하는 가장 쉬운 방법은 개발자 도구로 다양한 플랙스 코드를 시험해 보는 것입니다.
모두가 자주 보는 네이버 사이트로 설명드리겠습니다.

위와 이미지의 빨간 박스에 있는 바로가기 아이콘들이 flex로 정렬된 컨텐츠입니다.
코드로 보면 아래와 같습니다.

위 개발자 도구의 코드에서 저희가 주의 깊게 보아야할 부분은 display: flex; 우측에 있는 타일 박스입니다.(빨간 박스)
해당 박스를 클릭하면 위와 같은 마우스 컨트롤 도구가 나옵니다.

여기서 이것 저것 클릭해보시기만 해도 금방 flex가 익숙해질 것입니다.
아래에 추가적인 설명과 더 많은 flex관련 속성들도 있으니 참고해 보시기를 바랍니다.

아래 설명에서는 자주 사용되지 않는 코드들도 있습니다.
이런 것도 있구나 하고 인지만 해두셔도 됩니다.
다만, (중요)라고 적은 내용은 꼭 인지하고 외우시기까지 하면 무척 도움이 될 것입니다.

---

Flex를 적용하는 부모 요소에서 사용하는 속성

flex-direction (중요)

flex 박스 안의 아이템 배치 방향을 설정합니다.

• row (기본값): 아이템을 가로로 배치. (왼쪽 → 오른쪽)
• row-reverse: 아이템을 가로로 배치. (오른쪽 → 왼쪽)
• column: 아이템을 세로로 배치. (위 → 아래)
• column-reverse: 아이템을 세로로 배치. (아래 → 위)

 

flex-wrap (중요)

아이템이 flex 박스의 크기를 초과할 경우 줄바꿈 여부를 설정합니다.

• nowrap (기본값): 줄바꿈하지 않음.
• wrap: 필요 시 줄바꿈.
• wrap-reverse: 줄바꿈 시 반대 방향으로 배치.

 

flex-flow

flex-direction과 flex-wrap을 축약해서 설정하는 속성입니다.

• <flex-direction> <flex-wrap>
• 예: flex-flow: row wrap;

 

justify-content (중요)

세로 방향으로 아이템을 정렬합니다.
flex-direction을 column으로 하면 가로 방향이 됩니다.

• flex-start (기본값): 시작 지점으로 정렬.
• flex-end: 끝 지점으로 정렬.
• center: 중앙 정렬.
• space-between: 아이템을 양 끝에 붙이기.
• space-around: 아이템 양쪽에 동일한 패딩 추가. 아이템을 끝에 가깝게 붙이되 간격 있음.
• space-evenly: 아이템 간 간격을 동일하게 분배. 아이템을 시작과 끝까지 일정한 간격으로 배치.

 

align-items (중요)

가로 방향으로 아이템을 정렬합니다.
flex-direction을 column으로 하면 세로 방향이 됩니다.

• stretch (기본값): 아이템을 컨테이너의 높이나 너비에 맞게 늘림.
• flex-start: 시작 지점으로 정렬.
• flex-end: 끝 지점으로 정렬.
• center: 중앙 정렬.
• baseline: 텍스트 기준선에 맞춰 정렬.

 

align-content

줄이 여러 개인 경우 가로 방향의 정렬 방식을 설정합니다.
(flex-wrap: wrap;일 때만 사용할 수 있습니다.)

• stretch (기본값): 줄을 flex 박에 맞게 늘림.
• flex-start: 시작 지점으로 정렬.
• flex-end: 끝 지점으로 정렬.
• center: 중앙 정렬.
• space-between: 아이템을 양 끝에 붙이기.
• space-around: 줄 양쪽에 동일한 패딩 추가. 아이템을 끝에 가깝게 붙이되 간격 있음.

---

Flex 자식 요소에서 사용하는 속성

order

아이템의 배치 순서를 설정합니다.

• 정수 (기본값: 0).
• 낮은 값일수록 먼저 배치됩니다.

 

flex

아이템의 크기를 유연하게 설정하는 단축 속성입니다. (축약형)

• flex-grow: 남은 공간을 아이템이 얼마나 차지할지 결정 (기본값: 0).
• flex-shrink: 공간 부족 시 아이템이 얼마나 줄어들지 결정 (기본값: 1).
• flex-basis: 아이템의 초기 크기를 설정 (기본값: auto).
• 예: flex: 0 1 auto;

 

flex-grow

남은 공간을 아이템이 차지하는 비율을 설정합니다.

• 숫자 (기본값: 0).
• 예: 1은 공간을 균등 분배.

 

flex-shrink (중요)

flex 박스의 크기가 부족할 때 아이템이 줄어드는 비율을 설정합니다.
flex를 사용하면 컨텐츠가 다른 컨텐츠에 의해 눌리는 현상이 발생할 수 있습니다.
이때 눌리는 컨텐츠에 flex-shring: 0;을 주면 눌리는 현상을 해결할 수 있습니다.

• 숫자 (기본값: 1).
• 예: 0이면 크기를 줄이지 않음.

 

flex-basis

아이템의 기본 크기를 설정합니다.

• auto (기본값): 콘텐츠 크기에 따라 자동 설정.
• px, %, em 등 특정 크기 값.

 

align-self

개별 아이템의 교차 축 정렬 방식을 설정합니다.
(align-items를 덮어씁니다.)

• auto (기본값): 부모의 align-items를 상속.
• flex-start: 시작 지점으로 정렬.
• flex-end: 끝 지점으로 정렬.
• center: 중앙 정렬.
• baseline: 텍스트 기준선에 맞춰 정렬.
• stretch: 아이템을 컨테이너 크기에 맞게 늘림.