플렉스박스(Flexbox) - 심화

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

반응형 디자인과 Flexbox

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

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

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

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

동적인 Flexbox 아이템 정렬

Flexbox 아이템을 정렬할 떄 사용하는 주요 속성으로는 flex-grow, flex-shrink, flex-basis가 있습니다.

flex-grow

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

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

flex-shrink

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

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

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 강의를 등록해 주세요!

반응형 디자인과 Flexbox​

동적인 Flexbox 아이템 정렬​

flex-grow​

flex-shrink​

flex-basis​

flex 속성​