분해된 팬케이크

마케팅 사이트에서 흔히 사용되는 레이아웃입니다. 예를 들어 3개 항목으로 구성된 행이 있으며, 보통 이미지, 제목, 일부 텍스트가 포함되어 있으며 제품의 몇 가지 특징을 설명합니다. 작은 화면에서는 잘 쌓이고 화면 크기가 커질수록 확장되는 것이 좋습니다.

이 효과를 위해 Flexbox를 사용하면 화면 크기를 조절할 때 미디어 쿼리가 이러한 요소의 위치를 조정할 필요가 없습니다.

flex는 flex: <flex-grow> <flex-shrink> <flex-basis>를 의미합니다.

flex-grow 스트레칭

상자가 다음 줄로 래핑될 때 공간이 늘어나고 채워지도록 하려면 <flex-grow> 값을 1로 설정합니다. 예를 들면 다음과 같습니다.

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

이제 화면 크기를 늘리거나 줄이면 이러한 Flex 항목이 축소되거나 증가합니다.

스트레칭 없음

상자를 <flex-basis> 크기로 채우고 작은 크기에서 축소하되 추가 공간을 채우도록 늘어나지 않게 하려면 다음과 같이 작성합니다. flex: 0 1 <flex-basis> 이 경우 <flex-basis>는 150픽셀입니다.

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

HTML

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}