پنکیک تخریب شده

به عنوان مثال، این یک چیدمان معمول برای سایت های بازاریابی است که ممکن است دارای یک ردیف از سه مورد باشد که معمولاً دارای یک تصویر، عنوان و سپس مقداری متن است که برخی از ویژگی های یک محصول را توصیف می کند. در صفحه‌های کوچک‌تر، می‌خواهید که آن‌ها به خوبی روی هم چیده شوند و با افزایش اندازه صفحه، بزرگ شوند.

با استفاده از flexbox برای این افکت، برای تنظیم قرارگیری این عناصر در هنگام تغییر اندازه صفحه، نیازی به پرس و جوهای رسانه ای نخواهید داشت.

مخفف flex مخفف: flex: <flex-grow> <flex-shrink> <flex-basis> .

کشش flex-grow

اگر می‌خواهید که جعبه‌ها در خط بعدی کشیده شوند و فضا را پر کنند، مقدار <flex-grow> را روی 1 تنظیم کنید، برای مثال:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

اکنون، با افزایش یا کاهش اندازه صفحه، این موارد انعطاف پذیر هم کوچک می شوند و هم رشد می کنند.

بدون کشش

اگر می‌خواهید جعبه‌های شما به اندازه <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;
}