فطيرة محلاة

هذا مخطط شائع لمواقع التسويق، على سبيل المثال، قد يحتوي على صف من ثلاثة عناصر، عادةً مع صورة وعنوان ثم بعض النص، يصف بعض ميزات المنتج. على الشاشات الأصغر، سترغب في تكديسها بشكل جيد، وتوسيعها مع زيادة حجم الشاشة.

باستخدام 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;
}

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

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

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