반응형 디자인을 위한 Flex 핵심 / flex 속성 정

⭐️ flex 속성이란?

flex는 Flexbox 레이아웃에서 요소가 부모 컨테이너 안에서 공간을 차지하는 방법을 지정하는 단축 속성입니다.

flex는 다음 세 가지 속성을 조합한 것입니다:

• flex-grow: 요소가 남는 공간을 얼마나 많이 차지할지 결정
• flex-shrink: 컨테이너가 작아질 때 요소가 얼마나 줄어들지 결정
• flex-basis: 요소의 기본 크기를 설정

flex: <flex-grow> <flex-shrink> <flex-basis>로 구성되며, 값이 생략된 경우 기본값은 아래와 같습니다:

flex: 0 1 auto;

 

⭐️ flex 속성의 구성 요소

(1) flex-grow: 남는 공간 차지

flex-grow는 컨테이너에 남는 공간이 있을 때, 요소가 그 공간을 얼마나 차지할지 결정합니다.

.container {
  display: flex;
  gap: 10px;
}

.box1 { flex-grow: 1; } /* 공간 1배 차지 */
.box2 { flex-grow: 2; } /* 공간 2배 차지 */
.box3 { flex-grow: 3; } /* 공간 3배 차지 */

결과: box2는 box1의 2배, box3는 box1의 3배 크기로 공간을 차지합니다.

(2) flex-shrink: 줄어드는 비율

flex-shrink는 컨테이너가 작아질 때, 요소가 얼마나 줄어들 수 있는지 결정합니다.

.box1 { flex-shrink: 1; } /* 줄어드는 비율 1 */
.box2 { flex-shrink: 2; } /* 줄어드는 비율 2 */
.box3 { flex-shrink: 0; } /* 크기 고정, 줄어들지 않음 */

결과: box2는 box1보다 2배 더 많이 줄어들고, box3는 크기가 유지됩니다.

(3) flex-basis: 초기 크기

flex-basis는 요소의 기본 크기를 설정합니다. 픽셀, %, 혹은 auto 값을 사용할 수 있습니다.

.box1 { flex-basis: 100px; } /* 기본 크기 100px */
.box2 { flex-basis: 50%; }   /* 부모 너비의 50% */
.box3 { flex-basis: auto; }  /* 콘텐츠에 따라 자동 설정 */

결과: 각 요소는 기본 크기를 먼저 설정한 후, 남는 공간을 flex-grow로 조정합니다.

 

⭐️ 단축 속성 flex 이해하기

flex: 0 1 auto;
//flex-grow: 0 → 남는 공간을 차지하지 않음
//flex-shrink: 1 → 컨테이너가 작아지면 줄어듦
//flex-basis: auto → 요소의 기본 크기를 콘텐츠 기반으로 설정

flex: 1; /* flex: 1 1 0; */
//flex-grow: 1 → 남는 공간을 균등하게 차지
//flex-shrink: 1 → 공간이 부족하면 균등하게 줄어듦
//flex-basis: 0 → 기본 크기를 무시하고 공간을 나눔