פנקייק דק

זוהי פריסה נפוצה לאתרי שיווק, למשל, שעשויה לכלול שורה של שלושה פריטים, בדרך כלל עם תמונה, כותרת ולאחר מכן טקסט כלשהו, שמתארת תכונות מסוימות של מוצר. במסכים קטנים יותר, כדאי שהם יקובצו בצורה טובה ויורחבו ככל שתגדילו את גודל המסך.

כשמשתמשים ב-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> הוא 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;
}