분해된 팬케이크

마케팅 사이트에 일반적으로 사용되는 레이아웃입니다. 예를 들어 일반적으로 이미지, 제목, 제품의 일부 기능을 설명하는 텍스트가 포함된 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>는 150px입니다.

.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;
}