תיעוד CSS עם דוגמאות להרצה: Flex Wrap

Q: מה ההבדל בין flex-direction row ל-column?

row (ברירת המחדל) מציב את הפריטים זה לצד זה בכיוון הכתיבה, ו-column מערם אותם מלמעלה למטה. הציר הראשי מסתובב יחד איתו, כך שבעמודה justify-content פועל אנכית ו-align-items אופקית.

Q: מה זה flex-flow?

קיצור ל-flex-direction ול-flex-wrap בהצהרה אחת: flex-flow: row wrap; זהה ל-flex-direction: row; flex-wrap: wrap;.

Q: מה ההבדל בין align-items ל-align-content?

align-items ממקם פריטים בתוך השורה שלהם. align-content ממקם את השורות עצמן בתוך המכל, ולכן הוא משנה רק כשלמכל יש flex-wrap: wrap והוא גבוה יותר מהשורות שלו.

flex-wrap: שורה אחת, או כמה שצריך

כברירת מחדל מכל flex שומר את כל הפריטים שלו בשורה אחת (flex-wrap: nowrap) ומכווץ אותם כדי שייכנסו. flex-wrap: wrap מאפשר להם לשמור על הגודל שלהם ולעבור לשורה הבאה במקום:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-wrap</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; gap: 8px; width: 340px; padding: 8px; background: #e5e7eb; margin-bottom: 12px; }
    .item { width: 100px; height: 36px; background: #2563eb; color: white; }
    .wrap { flex-wrap: wrap; }
  </style>
</head>
<body>
  <code>flex-wrap: nowrap (default)</code>
  <div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <code>flex-wrap: wrap</code>
  <div class="box wrap"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <script>
    document.querySelectorAll('.box').forEach((box) => {
      box.children[0].textContent = Math.round(box.children[0].getBoundingClientRect().width) + 'px wide';
    });
  </script>
</body>
</html>

כל פריט מבקש 100px, חמישה כאלה בתיבה של 340px. חמישה פריטים וארבעה רווחים של 8px צריכים 532px, ולכן בלי שבירת שורה כל פריט נדחס לבערך 62px, כי פריטי flex מתכווצים כברירת מחדל. עם wrap הם נשארים ב-100px: שלושה נכנסים בשורה הראשונה, והשניים האחרים עוברים לשורה שנייה.

ערכי flex-wrap

ערך	מה קורה
`nowrap` (ברירת מחדל)	שורה אחת. הפריטים מתכווצים, וגולשים מהמכל ברגע שהם לא יכולים להתכווץ יותר
`wrap`	פריטים שלא נכנסים מתחילים שורה חדשה למטה
`wrap-reverse`	אותו הדבר, אבל שורות חדשות נערמות כלפי מעלה: השורה הראשונה נמצאת למטה

צפו בפריטים עוברים שורה

גררו את המחוון כדי לשנות את הרוחב של המכל. הפלט סופר את השורות ואומר כמה פריטים יש בכל אחת:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrap slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    #box { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #e5e7eb; margin: 10px 0; }
    .item { width: 90px; height: 40px; background: #16a34a; color: white; display: flex; align-items: center; justify-content: center; }
  </style>
</head>
<body>
  <label>container width <input id="w" type="range" min="120" max="620" value="400"> <span id="wv"></span></label>
  <div id="box"></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    for (let i = 1; i <= 6; i++) box.insertAdjacentHTML('beforeend', '<div class="item">' + i + '</div>');
    const update = () => {
      const w = document.getElementById('w').value;
      box.style.width = w + 'px';
      document.getElementById('wv').textContent = w + 'px';
      const lines = {};
      [...box.children].forEach((c) => { const top = Math.round(c.getBoundingClientRect().top); lines[top] = (lines[top] || 0) + 1; });
      const counts = Object.values(lines);
      document.getElementById('out').textContent = counts.length + ' line(s): ' + counts.join(' + ') + ' items';
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

ב-400px, ארבעה פריטים של 90px ושלושה רווחים של 8px (384px) נכנסים בשורה, כך שמקבלים 4 + 2. גררו לכיוון 620px וכל השישה נכנסים בשורה אחת; גררו לכיוון 120px וכל פריט מקבל שורה משלו.

flex-direction: שורה או עמודה

flex-direction קובע את הכיוון שבו הפריטים זורמים, שהוא הציר הראשי:

ערך	הפריטים זורמים	הפריט הראשון
`row` (ברירת מחדל)	זה לצד זה, בכיוון הכתיבה	בתחילת השורה
`row-reverse`	זה לצד זה, בסדר הפוך	בסוף השורה
`column`	בערימה, מלמעלה למטה	למעלה
`column-reverse`	בערימה, מלמטה למעלה	למטה

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-direction</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .box { display: flex; gap: 4px; padding: 6px; background: #e5e7eb; width: 160px; height: 110px; margin-top: 4px; }
    .box div { background: #2563eb; color: white; padding: 4px 10px; }
  </style>
</head>
<body>
  <div class="grid">
    <div><code>row</code><div class="box" style="flex-direction: row"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>row-reverse</code><div class="box" style="flex-direction: row-reverse"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column</code><div class="box" style="flex-direction: column"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column-reverse</code><div class="box" style="flex-direction: column-reverse"><div>1</div><div>2</div><div>3</div></div></div>
  </div>
</body>
</html>

בשתי התיבות של row הפריטים נמתחים לכל הגובה של התיבה, כי align-items: stretch פועל לרוחב השורה. בתיבות של column הם נמתחים במקום זאת לכל הרוחב, מאותה סיבה. הצירים הסתובבו, וכל מאפייני היישור הסתובבו איתם (עמוד ה-justify-content מראה את זה בפירוט).

flex-flow: שניהם בשורה אחת

flex-flow הוא הקיצור ל-flex-direction ואחריו flex-wrap:

.cards { flex-flow: row wrap; }      /* flex-direction: row; flex-wrap: wrap; */
.stack { flex-flow: column nowrap; } /* flex-direction: column; flex-wrap: nowrap; */

כרטיסים רספונסיביים עם wrap ובלי media query

תנו לכל פריט גודל התחלתי עם flex: 1 1 180px ותנו לשורה לעבור שורה. כל פריט גדל כדי למלא את השורה שלו, וכששורה לא יכולה להכיל עוד פריט של 180px, הבא עובר שורה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrapping cards</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: flex; flex-wrap: wrap; gap: 12px; }
    .card {
      flex: 1 1 180px; /* grow, shrink, start at 180px */
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f9fafb;
    }
  </style>
</head>
<body>
  <div class="cards">
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">Four</div>
    <div class="card">Five</div>
  </div>
</body>
</html>

בתצוגה מקדימה ברוחב של בערך 800px, שלושה כרטיסים נכנסים בשורה הראשונה (בערך 253px כל אחד), והשניים האחרונים חולקים את השורה השנייה, שבה כל אחד גדל לבערך 386px. כך flexbox עובד: כל שורה מחלקת את המקום שלה, ולכן כרטיסים בשורה אחרונה קצרה יוצאים רחבים יותר מאלה שמעליהם. אם אתם רוצים שהכרטיס האחרון יישאר באותו רוחב כמו האחרים, השתמשו במקום זאת ב-grid עם repeat(auto-fill, minmax(180px, 1fr)) (ראו את עמוד ה-grid).

align-content: ריווח השורות

כשמכל עובר שורות והוא גבוה יותר מהשורות שלו, align-content קובע לאן השורות הולכות. הוא מקבל את אותם ערכים כמו justify-content, ועוד stretch:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-content</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; height: 160px; background: #e5e7eb; }
    .box div { width: 60px; height: 30px; background: #f59e0b; }
    .row { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>align-content: flex-start</code><div class="box" style="align-content: flex-start"><div></div><div></div><div></div><div></div><div></div></div></div>
    <div><code>align-content: space-between</code><div class="box" style="align-content: space-between"><div></div><div></div><div></div><div></div><div></div></div></div>
  </div>
</body>
</html>

בתיבה הראשונה שתי השורות יושבות למעלה. בשנייה השורה הראשונה למעלה והשנייה למטה, עם כל הגובה הפנוי ביניהן.

סדר הפוך ונגישות

row-reverse, column-reverse ו-wrap-reverse משנים רק איפה הפריטים מצוירים. קוראי מסך ומקש ה-Tab עדיין עוקבים אחרי הסדר ב-HTML, כך שמשתמש מקלדת עובר בין הפריטים בכיוון ההפוך למה שהוא רואה. הפכו סדר רק לאפקט חזותי; כשלסדר יש משמעות, שנו אותו ב-HTML.

טעויות נפוצות

פריטים שמתכווצים במקום לעבור שורה. פריטים עם flex: 1 מתחילים מ-flex-basis של 0 ונדחסים לשורה אחת. תנו להם בסיס אמיתי, כמו flex: 1 1 200px.
flex-wrap על הפריטים. הוא שייך למכל ה-flex.
שימוש ב-align-items לריווח שורות שעברו שורה. הוא מיישר פריטים בתוך כל שורה; השורות עצמן זזות עם align-content.
פריט אחרון בודד שנמתח לכל אורך השורה. זה flex-grow בשורה עם פריט אחד. השתמשו ב-grid אם כל כרטיס חייב להיות באותו רוחב.
ציפייה ש-flex-direction: column ימלא גובה. מכל של עמודה גבוה רק כמו התוכן שלו, אלא אם נותנים לו height, ולכן ל-justify-content אין מקום לפעול.

שאלות נפוצות

מה עושה flex-wrap: wrap?

הוא מאפשר לפריטי flex לעבור לשורה חדשה כשהם לא נכנסים בשורה אחת. עם ברירת המחדל nowrap, הפריטים נשארים בשורה אחת ומתכווצים, או גולשים מהמכל אם הם לא יכולים להתכווץ יותר.

למה flex-wrap לא עובד?

שבירת שורה קורית רק כשגדלי ההתחלה של הפריטים מסתכמים ליותר מהמכל. פריטים עם flex: 1 מתחילים מ-flex-basis של 0, ולכן הם אף פעם לא עוברים שורה; תנו להם גודל התחלתי אמיתי (flex: 1 1 200px או width: 200px). בדקו גם ש-flex-wrap נמצא על מכל ה-flex, לא על הפריטים.

מה ההבדל בין flex-direction row ל-column?

row (ברירת המחדל) מציב את הפריטים זה לצד זה בכיוון הכתיבה, ו-column מערם אותם מלמעלה למטה. הציר הראשי מסתובב יחד איתו, כך שבעמודה justify-content פועל אנכית ו-align-items אופקית.

מה זה flex-flow?

קיצור ל-flex-direction ול-flex-wrap בהצהרה אחת: flex-flow: row wrap; זהה ל-flex-direction: row; flex-wrap: wrap;.

מה ההבדל בין align-items ל-align-content?

align-items ממקם פריטים בתוך השורה שלהם. align-content ממקם את השורות עצמן בתוך המכל, ולכן הוא משנה רק כשלמכל יש flex-wrap: wrap והוא גבוה יותר מהשורות שלו.

מושגים קשורים