헷갈리는 CSS Flex 속성 정리(grow, shrink, basis, margin auto 등)

1. 상위 요소(Flex Container)에 적용하는 속성

display: flex vs display: inline-flex

display: flex는 block 요소처럼 자리를 차지함. 따라서 부모 너비 전체를 차지한다:

display: flex

display: inline-flex는 이름 그대로 inline 요소처럼 자리를 차지함. 따라서 컨텐츠 너비만큼만 차지한다:

display: inline-block

거의 대부분의 상황에서 flex를 사용하지만, 버튼 그룹, 태그 그룹, 배지 등에서는 inline-flex를 사용하는 것이 더 적절할 수 있다.
정리하자면 독립적인 블록이 필요할 땐 flex, 다른 요소와 같은 줄에 있어야 하면 inline-flex를 사용하는 것이 좋다.

 

2. 하위 요소(Flex Item)에 적용하는 속성

flex(grow, shrink, basis)

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니다.

https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Properties/flex

• flex-grow
  • 기본값: 0
  • item 너비에 대한 확대 인자
  • 여유 공간을 얼마나 차지할지 설정
• flex-shrink
  • 기본값: 1
  • item 너비에 대한 축소 인자
  • 공간이 부족할 때 얼마나 줄어들지
• flex-basis
  • 기본값: auto (컨텐츠 크기)
  • item 너비의 기본값
  • 늘어나거나, 줄어들기 전의 기본 크기
  • 단위를 사용해야 한다. (0의 경우는 예외로 단위 없이 사용 가능)

자주 사용되는 flex 축약형

/* 정수 */
flex: 1;              /* = flex: 1 1 0% */

/* 축약형 키워드 */
flex: auto;           /* = flex: 1 1 auto */
flex: none;           /* = flex: 0 0 auto */

/* 3개 값 (명시적) */
flex: 0 0 200px;      /* 200px 고정 */
flex: 1 1 200px;      /* 200px 기준, 늘어남 */

/* 아이템 비율 적용 */
flex: 2;
flex: 1;

/* 기본값 (속성 없을 때) */
/* flex: 0 1 auto */

flex: 1;

• flex 속성에 1과 같은 정숫값만 설정하면 flex-grow 속성의 값만 지정하는 속성이 된다.
• 즉, flex: 1 1 0%과 같이 실행된다.
  • (flex-basis는 0으로 강제 적용됨. 콘텐츠 크기를 무시하고, 오직 grow 비율로 균등 배치되도록 하기 위해)
• 콘텐츠 길이와 관계없이 동일한 폭으로 나눈다.
• 경험상 가장 많이 사용했던 flex 속성이다. 
• ex. 컨텐츠영역의 화면 높이 100%를 채우게 하거나, 아이템들이 균등하게 같은 너비를 가지게 한다거나

Main 영역에 flex: 1을 적용한 상황

flex: auto;

• flex: 1 1 auto의 축약형으로, 콘텐츠의 크기를 기반으로 하지만, 여유 공간이 있으면 늘어나고 줄어듦(유연함)

검색창에 flex-auto 적용한 상황

flex: none;

• flex: 0 0 auto의 축약형으로, 절대 늘어나거나 줄어들지 않는다(고정 영역)
• ex. 아이콘이나, 체크박스, 라디오 버튼, 프로필 사진 (원형 아바타), 고정 너비 사이드 등 항상 고정해야 하는 요소와 유연하게 확장되어도 되는 요소를 한 줄에 배치할 때 

아이콘에 flex: none을 적용한 상황

flex: 0 0 고정크기

• flex: 0 0 250px; <= 항상 250px 고정
• flex: none;과 비슷하지만 크기를 명확하게 지정함.
• ex. 사이드바 영역과 메인 영역이 분리될 때 사이드영역은 고정 크기를 적용하고 메인 영역은 유연하게 적용할 때

flex: 1 1 200px

• 200px을 기준으로 하지만 늘어날 수 있음
• ex. 반응형 카드 레이아웃

비율을 적용할 때:

• item-1에는 flex: 2
• item-2에는 flex: 1을 넘긴다면 이 둘은 2:1 비율을 유지하게 된다.

 

align-self

• align-items는 부모에 적용해서 모든 자식을 정렬하지만, align-self는 자식에 직접 적용해서 개별 아이템만 다르게 정렬할 수 있다.
• 예를 들어 네비게이션에서 로고는 위에, 검색창은 중앙에, 버튼은 아래에 배치할 때 유용하다.

align-self

.container {
  display: flex;
  align-items: flex-start; /* 기본: 위 정렬 */
}

.item-center {
  align-self: center; /* 이것만 중앙 */
}

.item-end {
  align-self: flex-end; /* 이것만 아래 */
}

 

order

• HTML 구조를 건드리지 않고 CSS만으로 순서를 바꾸고 싶을 때, 주로 반응형 디자인 적용할 때 사용했다.
• 예를 들어 모바일에서는 로고를 맨 위에, 데스크톱에서는 메뉴를 먼저 보여줄 때 유용하다. 
• 기본값은 0

/* HTML: 빨강 → 초록 → 파랑 순서라고 할 때 */

.red { order: 3; }    /* 3번째로 */
.green { order: 1; }  /* 1번째로 */
.blue { order: 2; }   /* 2번째로 */

/* 결과: 초록 → 파랑 → 빨강 */

 

margin auto

(이 속성은 flex 없이도 사용할 수 있지만, margin: auto; 와 같이 적용했을 때 가로 정렬만 가능하다.
flex item에서는 margin: auto 속성으로 상하좌우 정렬을 적용할 수 있다. flexbox는 기본적으로 주축, 교차축 모두에서 작동하기 때문)

flex의 justify-content를 사용하여 각 item의 정렬을 조정할 수 있지만, 특정 아이템만 원하는 위치로 배치할 때 margin auto가 더 편리할 수 있다.

예시:

• 네비게이션: 로고 + 검색창 + 로그인 버튼을 배치하는 상황
  • space-between을 적용하면 검색창이 정중앙에 오지 않을 수 있다. space-between은 양 끝만 배치하고 중간은 균등 배치하기 때문이다.
  • 이때 검색창 요소에 margin: 0 auto;를 준다면 정중앙에 위치할 수 있다. 
• 카드: 제목/내용은 위에, 버튼은 항상 맨 아래에 고정하고 싶을 때
• 조건부 렌더링: 동적 컨텐츠 렌더링, 조건별 버튼 개수
• 그 외 반응형 적용, 스타일 변경이 잦거나 급하게 적용해야 할 경우, 스타일 배치 때문에 시맨틱 마크업을 불가피하게 수정해야 할 때... 등등

조건이 달라져도 확인 버튼은 항상 우측 하단에 고정해야 할 때

.push-right {
  margin-left: auto;
}

스타일 적용 때문에 마크업을 변경해야 하는 문제가 생겼을 때
간단하게 정렬을 적용할 수 있는 margin auto 방식도 고려해볼 수 있다.

 

+) min-width

flex item의 min-width는 기본값 auto이기 때문에,
whitespace: nowrap; 상황에서 텍스트 길이가 길어질 경우 레이아웃을 깨지고 부모 요소를 뚫고 길어질 수 있다.

.flex-container {
  display: flex;
  gap: 1.25rem;
  border: 1px solid #f59e0b;
  padding: 0.5rem;
}

.sidebar {
  background-color: #f4f4f5;
  flex: 0 0 180px;
  border-radius: 0.375rem;
  border: 1px solid;
  padding: 0.5rem;
}

.content {
  flex: 1;
  border-radius: 0.375rem;
  background-color: #fde68a;
  padding: 0.5rem;
  white-space: nowrap;
}

이때 min-width: 0을 주면 레이아웃을 유지하면서 말줄임표 처리를 할 수 있다.

/* 말줄임표 적용 */
.content {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  border-radius: 0.375rem;
  background-color: #fde68a;
  padding: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}