본문으로 건너뛰기
실습하기

플렉스박스(Flexbox) - 심화

Flexbox를 활용해 스마트폰부터 데스크톱까지 대응하는 반응형 디자인과 유동적인 레이아웃을 구현할 수있습니다.


  1. 반응형 디자인과 Flexbox

반응형 웹 디자인은 화면 크기에 따라 콘텐츠의 배치와 모양이 자동으로 변경되어, 다양한 기기에 웹사이트를 최적화합니다.

예를 들어 브라우저 창이 넓을 때는 여러 아이템이 가로 방향으로 한 줄에 나열되지만, 창이 좁아지면 아이템들이 세로로 배치시켜 더 나은 사용자 경험을 제공할 수 있습니다.


CSS
/* 기본적으로 컨테이너 내 아이템들을 가로로 배치 */
.flex-container {
  display: flex;
  flex-direction: row;
}

/* 화면 너비가 600px 이하면 컨테이너 내 아이템들을 세로로 배치 */
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}

  1. 동적인 Flexbox 아이템 정렬

flex-grow, flex-shrink, flex-basis 속성​

  1. flex-grow:

    • flex 아이템이 flex 컨테이너 내의 추가 공간을 어떻게 분배 받을지 결정합니다.

    • 값이 0이면 아이템은 추가 공간을 확장하여 차지하지 않습니다. 값이 1이상이면 해당 아이템은 다른 아이템들과 비교하여 추가 공간을 확장하여 차지합니다.

  2. flex-shrink:

    • flex 아이템이 flex 컨테이너 내의 공간이 부족할 때 어떻게 축소될지 결정합니다.

    • 값이 0이면 아이템은 공간 부족에 따라 축소되지 않습니다. 값이 1이상이면 해당 아이템은 다른 아이템들과 비교하여 공간 부족에 따라 축소됩니다.

  3. flex-basis:

    • 이 속성은 flex 아이템의 초기 크기를 결정합니다.

    • 예를 들어 flex-basis: 200px;은 아이템의 시작 크기가 200px이라는 것을 의미합니다. auto 값은 아이템의 기본 크기(content size)를 의미합니다.

CSS
.item {
  flex-grow: 1; /* 남은 공간을 아이템들 사이에 동일하게 분배 */
  flex-shrink: 1; /* 아이템을 같은 비율로 줄이기 */
  flex-basis: 200px; /* 아이템의 기본 크기는 200px */
}

flex 속성​

flex는 flex-grow, flex-shrink, flex-basis 세 가지 속성을 한 번에 설정하는 축약 속성입니다.

flex-grow, flex-shrink, flex-basis 각각의 값들이 순서대로 해당 속성에 적용됩니다.

CSS
/* flex: <flex-grow> <flex-shrink> <flex-basis> */
.item {
  flex: 1 1 0;
}

이 코드에서

  • flex-grow의 값은 1입니다. 따라서 아이템은 남은 공간을 동일하게 나누어 차지합니다.

  • flex-shrink의 값도 1입니다. 화면 크기가 줄어들 때, 아이템은 동일한 비율로 줄어듭니다.

  • flex-basis의 값은 0입니다. 아이템의 기본 크기는 0으로 설정됩니다. 이 경우 아이템은 내용에 따라 크기가 정해집니다.

flex 속성을 사용하면 여러 속성을 한 번에 설정할 수 있어 코드를 간결하게 만들 수 있습니다.


참고로 flex: 1;은 flex-grow: 1;, flex-shrink: 1;, flex-basis: 0%;을 한 번에 표현합니다.

이는 아이템이 추가 공간을 확장하도록 하고, 필요에 따라 축소되도록 설정하는 동시에 초기 크기를 0%로 설정하는 것을 의미합니다.


코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!