وثائق CSS قابلة للتشغيل: justify-content في CSS

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 أو حاوية عائمة). وتحقق أيضًا أن display: flex على الأب لا على العناصر.

Q: ماذا تفعل align-self؟

تتجاوز align-self قيمة align-items الخاصة بالحاوية لعنصر واحد. مثلًا align-self: flex-end على ابن واحد تنقل ذلك الابن وحده إلى نهاية المحور العرضي بينما يبقى الآخرون حيث وضعتهم align-items.

Q: هل توجد justify-self في flexbox؟

لا. يتجاهل flexbox الخاصية justify-self، لأن المحور الرئيسي مشترك بين كل العناصر. لدفع عنصر واحد على المحور الرئيسي استخدم هامشًا 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» على خط واحد رغم أن الأولى أكبر والثانية فوقها حشو. هذه هي القيمة المناسبة لصف يخلط عنوانًا كبيرًا بنص صغير، أو تسمية بحقل إدخال.

انقر للمحاذاة

انقر أي خلية في الشبكة ذات الثلاثة في ثلاثة. ينتقل الصندوق إليها، وتُطبع أدناه 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 والهوامش التلقائية: عنصر واحد فقط

align-self على عنصر تتجاوز align-items لذلك العنصر. لا توجد justify-self في flexbox؛ لتحريك عنصر واحد على المحور الرئيسي، أعطه هامشًا 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 أو حاوية عائمة). وتحقق أيضًا أن 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، لأن المحور الرئيسي مشترك بين كل العناصر. لدفع عنصر واحد على المحور الرئيسي استخدم هامشًا auto، مثل margin-inline-start: auto. أما justify-self فتعمل في grid.

مفاهيم ذات صلة