פנקייק דק

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

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

קיצור הדרך flex מייצג את הערך: flex: <flex-grow> <flex-shrink> <flex-basis>.

אם רוצים שהתיבות יתרחבו ויתמלאו את החלל כשהן עוברות לשורה הבאה, מגדירים את הערך של <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;
}
<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;
}