תיעוד CSS עם דוגמאות להרצה: Justify Content

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

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

Q: מה ההבדל בין space-between, space-around ו-space-evenly?

space-between לא שם רווח לפני הפריט הראשון או אחרי האחרון ומחלק את השאר בין הפריטים. space-around נותן לכל פריט רווח שווה משני הצדדים, כך שבקצוות יש חצי רווח. space-evenly הופך את כל הרווחים לשווים, כולל הקצוות.

Q: למה justify-content לא עובד?

בדרך כלל אין מקום פנוי לחלק: לאחד הפריטים יש flex-grow או flex: 1, או שהמיכל רחב בדיוק כמו הפריטים שלו (למשל display: inline-flex או מיכל עם float). בדקו גם ש-display: flex נמצא על ההורה, לא על הפריטים.

Q: מה align-self עושה?

align-self דורס את align-items של המיכל עבור פריט אחד. למשל align-self: flex-end על ילד אחד מזיז רק אותו לסוף הציר הניצב, בזמן שהאחרים נשארים איפה ש-align-items שם אותם.

Q: יש justify-self ב-flexbox?

לא. flexbox מתעלם מ-justify-self, כי הציר הראשי משותף לכל הפריטים. כדי לדחוף פריט אחד לאורך הציר הראשי, השתמשו ב-margin עם auto, כמו margin-inline-start: auto. justify-self עובד ב-grid.

justify-content ו-align-items במשפט אחד כל אחד

במיכל flex, justify-content מפזר את הפריטים לאורך הציר הראשי (לרוחב השורה) ו-align-items מיישר אותם על הציר הניצב (למעלה ולמטה בשורה). שניהם נכתבים על המיכל:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center both ways</title>
  <style>
    .box {
      display: flex;
      justify-content: center; /* horizontal, in a row */
      align-items: center;     /* vertical, in a row */
      height: 140px;
      background: #e5e7eb;
    }
    .item { background: #2563eb; color: white; padding: 12px 18px; }
  </style>
</head>
<body>
  <div class="box"><div class="item">Centered</div></div>
</body>
</html>

הקופסה ממורכזת בשני הכיוונים: באותו מרחק מקצה ההתחלה ומקצה הסיום, ומלמעלה ומלמטה. הסירו את height: 140px ול-align-items: center אין מה לעשות, כי המיכל מתכווץ לגובה של הפריט עצמו.

כל ערך של justify-content, מדוד

כל שורה למטה היא אותם שלושה פריטים עם justify-content אחר. המספרים בתווית מעל כל שורה הם הרווחים שהדפדפן השאיר: לפני הפריט הראשון, בין הפריטים ואחרי האחרון.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>justify-content values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; width: 420px; background: #e5e7eb; margin: 2px 0 10px; }
    .row div { width: 60px; height: 28px; background: #2563eb; }
    .row div:nth-child(2) { background: #16a34a; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="list"></div>
  <script>
    const values = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
    const list = document.getElementById('list');
    values.forEach((v) => {
      const label = document.createElement('code');
      const row = document.createElement('div');
      row.className = 'row';
      row.style.justifyContent = v;
      row.innerHTML = '<div></div><div></div><div></div>';
      list.append(label, row);
      const b = row.getBoundingClientRect();
      const r = [...row.children].map((c) => c.getBoundingClientRect());
      const gaps = [r[0].left - b.left, r[1].left - r[0].right, r[2].left - r[1].right, b.right - r[2].right];
      label.textContent = 'justify-content: ' + v + '   gaps: ' + gaps.map(Math.round).join(' / ');
    });
  </script>
</body>
</html>

המיכל ברוחב 420px והפריטים תופסים 180px, כך שיש 240px של מקום פנוי. לאן הוא הולך:

ערך	המקום הפנוי הולך	רווחים בהדגמה
`flex-start` (וגם `start`)	כולו אחרי הפריטים	0 / 0 / 0 / 240
`center`	חצי לפני, חצי אחרי	120 / 0 / 0 / 120
`flex-end` (וגם `end`)	כולו לפני הפריטים	240 / 0 / 0 / 0
`space-between`	רק בין הפריטים	0 / 120 / 120 / 0
`space-around`	שווה משני הצדדים של כל פריט, כך שבקצוות יש חצי	40 / 80 / 80 / 40
`space-evenly`	כל הרווחים שווים, כולל הקצוות	60 / 60 / 60 / 60

flex-start עוקב אחרי כיוון ה-flex ו-start עוקב אחרי כיוון הכתיבה. הם שונים רק עם row-reverse או column-reverse, שבהם flex-start נמצא בקצה ההפוך.

כל ערך של align-items

align-items פועל לרוחב השורה. לפריטים למטה יש גבהים שונים כדי שתוכלו לראות מה כל ערך עושה איתם:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-items values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .row { display: flex; gap: 4px; width: 170px; height: 100px; background: #e5e7eb; }
    .row div { width: 50px; background: #2563eb; color: white; }
    .row div:nth-child(1) { font-size: 26px; }
    .row div:nth-child(2) { background: #16a34a; padding-top: 20px; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid" id="grid"></div>
  <script>
    ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'].forEach((v) => {
      const cell = document.createElement('div');
      cell.innerHTML = '<code>align-items: ' + v + '</code><div class="row" style="align-items: ' + v + '"><div>Ag</div><div>Ag</div><div>Ag</div></div>';
      document.getElementById('grid').append(cell);
    });
  </script>
</body>
</html>

ערך	מה קורה על הציר הניצב
`stretch` (ברירת המחדל)	פריטים בלי גובה מוגדר גדלים וממלאים את המיכל
`flex-start` (וגם `start`)	הפריטים יושבים למעלה, בגובה שלהם
`center`	הפריטים ממורכזים, בגובה שלהם
`flex-end` (וגם `end`)	הפריטים יושבים למטה
`baseline`	הפריטים זזים כך שהשורות הראשונות של הטקסט חולקות קו בסיס אחד

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

לחצו כדי ליישר

לחצו על כל תא ברשת של 3 על 3. הקופסה זזה לשם, וה-CSS שמציב אותה שם מודפס מתחת:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alignment picker</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .wrap { display: flex; gap: 16px; align-items: flex-start; }
    .picker { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
    .picker button { height: 28px; border: 1px solid #111827; background: white; cursor: pointer; }
    .picker button[aria-pressed="true"] { background: #2563eb; }
    #stage { display: flex; width: 260px; height: 150px; background: #e5e7eb; }
    .item { background: #16a34a; color: white; padding: 10px 14px; }
    pre { background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="picker" id="picker"></div>
    <div id="stage"><div class="item">Box</div></div>
  </div>
  <pre id="out"></pre>
  <script>
    const spots = ['flex-start', 'center', 'flex-end'];
    const stage = document.getElementById('stage');
    const pick = (row, col, btn) => {
      stage.style.alignItems = spots[row];
      stage.style.justifyContent = spots[col];
      document.querySelectorAll('.picker button').forEach((b) => b.setAttribute('aria-pressed', b === btn));
      document.getElementById('out').textContent =
        '.stage {\n  display: flex;\n  justify-content: ' + spots[col] + ';\n  align-items: ' + spots[row] + ';\n}';
    };
    spots.forEach((_, row) => spots.forEach((_, col) => {
      const btn = document.createElement('button');
      btn.setAttribute('aria-label', 'row ' + (row + 1) + ', column ' + (col + 1));
      btn.addEventListener('click', () => pick(row, col, btn));
      document.getElementById('picker').append(btn);
    }));
    pick(1, 1, document.querySelectorAll('.picker button')[4]);
  </script>
</body>
</html>

השורות בבורר משנות את align-items והעמודות משנות את justify-content. התא האמצעי הוא ה"מרכוז של div" הקלאסי.

בעמודה, השניים מתחלפים

justify-content תמיד עוקב אחרי הציר הראשי. עם flex-direction: column הציר הראשי אנכי, ולכן justify-content מזיז פריטים למעלה ולמטה ו-align-items מזיז אותם לרוחב:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Column axes</title>
  <style>
    .col {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* now vertical: pushed to the bottom */
      align-items: center;       /* now horizontal: centered */
      height: 160px;
      background: #e5e7eb;
    }
    .col div { background: #2563eb; color: white; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="col"><div>One</div><div>Two</div></div>
</body>
</html>

אם התבלבלתם ביניהם, החליפו את שני המאפיינים במקום לכתוב מחדש את הפריסה.

align-self ו-margin אוטומטי: לפריט אחד בלבד

align-self על פריט דורס את align-items עבור הפריט הזה. אין justify-self ב-flexbox; כדי להזיז פריט אחד לאורך הציר הראשי, תנו לו margin עם auto, שלוקח את כל המקום הפנוי בצד הזה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-self</title>
  <style>
    .bar { display: flex; align-items: flex-start; gap: 8px; height: 90px; background: #e5e7eb; }
    .bar div { background: #2563eb; color: white; padding: 8px 12px; }
    .bar .down { align-self: flex-end; background: #16a34a; }
    .bar .last { margin-inline-start: auto; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="bar">
    <div>Top</div>
    <div class="down">align-self: flex-end</div>
    <div class="last">margin-inline-start: auto</div>
  </div>
</body>
</html>

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

כשיש כמה שורות: align-content

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

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

בלבול בין הצירים. justify-content הוא כיוון הזרימה, align-items הוא לרוחבו. בעמודה, מרכוז אנכי הוא justify-content: center.
אין מקום פנוי. פריט עם flex: 1 לוקח את כל המקום, ולכן ל-justify-content אין מה לחלק. אותו דבר קורה כשהמיכל הוא inline-flex ורחב בדיוק כמו הפריטים שלו.
אין גובה ל-align-items. מיכל שגבוה כמו התוכן שלו לא משאיר מה ליישר. הגדירו height או min-height.
לחפש justify-self ב-flexbox. שם הוא נזנח. השתמשו ב-margin-inline-start: auto (או margin-left: auto) על הפריט.
align-items: stretch שלא מותח. פריט עם height משלו שומר עליו. הסירו את הגובה (השתמשו ב-min-height אם צריך מינימום).
לשים את המאפיינים על הפריטים. שניהם נכתבים על מיכל ה-flex. רק align-self נכתב על פריט.

שאלות נפוצות

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

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

מה ההבדל בין space-between, space-around ו-space-evenly?

space-between לא שם רווח לפני הפריט הראשון או אחרי האחרון ומחלק את השאר בין הפריטים. space-around נותן לכל פריט רווח שווה משני הצדדים, כך שבקצוות יש חצי רווח. space-evenly הופך את כל הרווחים לשווים, כולל הקצוות.

למה justify-content לא עובד?

בדרך כלל אין מקום פנוי לחלק: לאחד הפריטים יש flex-grow או flex: 1, או שהמיכל רחב בדיוק כמו הפריטים שלו (למשל display: inline-flex או מיכל עם float). בדקו גם ש-display: flex נמצא על ההורה, לא על הפריטים.

למה align-items center לא ממרכז אנכית?

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

מה align-self עושה?

align-self דורס את align-items של המיכל עבור פריט אחד. למשל align-self: flex-end על ילד אחד מזיז רק אותו לסוף הציר הניצב, בזמן שהאחרים נשארים איפה ש-align-items שם אותם.

יש justify-self ב-flexbox?

לא. flexbox מתעלם מ-justify-self, כי הציר הראשי משותף לכל הפריטים. כדי לדחוף פריט אחד לאורך הציר הראשי, השתמשו ב-margin עם auto, כמו margin-inline-start: auto. justify-self עובד ב-grid.

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