وثائق CSS قابلة للتشغيل: Flexbox في CSS

Q: ماذا تعني flex: 1؟

flex: 1 اختصار لـ flex: 1 1 0%: يمكن للعنصر أن يكبر (flex-grow: 1)، ويمكن أن يصغر (flex-shrink: 1)، ويبدأ من حجم صفر (flex-basis: 0%). العناصر التي لها كلها flex: 1 تتقاسم المساحة الحرة بالتساوي، فتنتهي بالعرض نفسه ما لم يكن محتواها لا يتسع.

Q: ما الفرق بين justify-content وalign-items؟

تضع justify-content العناصر على المحور الرئيسي (أفقيًا في الصف)، وتضعها align-items على المحور العرضي (عموديًا في الصف). مع flex-direction: column يتبادل المحوران، فتصبح justify-content عمودية.

Q: لماذا يتجاوز عنصر flex حاويته؟

لعنصر flex القيمة min-width: auto افتراضيًا، فيرفض أن يصغر عن عرض أطول كلمة فيه أو أعرض ابن له. اضبط min-width: 0 (أو overflow: hidden) على العنصر كي يتمكن من التقلص، مثلًا لكي تعمل text-overflow: ellipsis.

Q: هل يعمل flexbox على العناصر السطرية مثل span؟

نعم. أي عنصر عليه display: flex حاوية flex، ويصبح أبناؤه عناصر flex مهما كانت قيمة display الخاصة بهم، فيتوقف أبناء عن كونهم سطريين ويقبلون العرض والارتفاع والهامش مثل العناصر الكتلية.

ماذا تفعل display: flex

ضع display: flex على أب وسيصطف أبناؤه المباشرون في صف، جنبًا إلى جنب، ويتمددون إلى الارتفاع نفسه. هذا التصريح الواحد يحل محل العناصر العائمة وinline-block ومعظم حيل الموضعة لترتيب صف من الأشياء.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>display flex</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { background: #e5e7eb; padding: 8px; margin-bottom: 12px; }
    .flex { display: flex; gap: 8px; }
    .item { background: #2563eb; color: white; padding: 10px 14px; }
    .tall { padding-block: 24px; }
  </style>
</head>
<body>
  <p>Without flex (normal block layout):</p>
  <div class="box">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
  <p>With display: flex:</p>
  <div class="box flex">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

في الصندوق الأول يأخذ كل div سطرًا كاملًا. وفي الثاني تقع العناصر الثلاثة في صف واحد، كل منها بعرض محتواه فقط، ويتمدد One وThree إلى ارتفاع Two. الأب وحده تغيّر: display: flex توضع على الحاوية، لا على العناصر أبدًا.

ساحة تجربة Flexbox

اختر قيمًا وراقب العناصر تتحرك. سطر الشيفرة تحت الصندوق هو CSS لما تراه، والقائمة تحته هي المكان الذي وضع فيه المتصفح كل عنصر فعلًا، مقيسًا بـ getBoundingClientRect().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flexbox playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
    #box { display: flex; height: 170px; background: #e5e7eb; border: 2px solid #111827; }
    .item { background: #2563eb; color: white; width: 60px; padding: 8px; box-sizing: border-box; }
    .item:nth-child(2) { background: #16a34a; height: 80px; }
    .item:nth-child(3) { background: #f59e0b; height: 50px; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>flex-direction <select data-p="flex-direction"><option>row</option><option>row-reverse</option><option>column</option><option>column-reverse</option></select></label>
    <label>justify-content <select data-p="justify-content"><option>flex-start</option><option>center</option><option>flex-end</option><option>space-between</option><option>space-around</option><option>space-evenly</option></select></label>
    <label>align-items <select data-p="align-items"><option>stretch</option><option>flex-start</option><option>center</option><option>flex-end</option><option>baseline</option></select></label>
    <label>gap <select data-p="gap"><option>0px</option><option>8px</option><option>24px</option></select></label>
  </div>
  <div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <pre id="out"></pre>
  <script>
    const box = document.getElementById('box');
    const selects = document.querySelectorAll('select');
    const update = () => {
      const css = [];
      selects.forEach((s) => { box.style.setProperty(s.dataset.p, s.value); css.push(s.dataset.p + ': ' + s.value + ';'); });
      const b = box.getBoundingClientRect();
      const places = [...box.children].map((el) => {
        const r = el.getBoundingClientRect();
        return el.textContent + ': x ' + Math.round(r.left - b.left - 2) + ', y ' + Math.round(r.top - b.top - 2) + ', ' + Math.round(r.width) + ' x ' + Math.round(r.height);
      });
      document.getElementById('out').textContent = '.box { display: flex; ' + css.join(' ') + ' }\n' + places.join('\n');
    };
    selects.forEach((s) => s.addEventListener('change', update));
    update();
  </script>
</body>
</html>

أمور تستحق التجربة:

justify-content: space-between: يستقر العنصر 1 عند x 0 ويلامس العنصر 3 الحافة البعيدة.
align-items: center: تحتفظ العناصر الثلاثة بارتفاعاتها وتصطف مراكزها. ومع القيمة الافتراضية stretch لا يكون للعنصر 1 ارتفاع خاص به فيملأ ارتفاع الحاوية الكامل 170px.
flex-direction: column: الآن تحرك justify-content العناصر عموديًا وalign-items أفقيًا. الخاصيتان تتبعان المحاور لا الشاشة.

المحور الرئيسي والمحور العرضي

لكل حاوية flex محوران. المحور الرئيسي هو اتجاه انسياب العناصر، وتحدده flex-direction. والمحور العرضي يقطعه بشكل متعامد.

`flex-direction`	المحور الرئيسي	المحور العرضي	`justify-content` تحرك العناصر	`align-items` تحرك العناصر
`row` (الافتراضي)	أفقي، بترتيب القراءة	عمودي	أفقيًا	عموديًا
`row-reverse`	أفقي، معكوس	عمودي	أفقيًا	عموديًا
`column`	عمودي، من الأعلى إلى الأسفل	أفقي	عموديًا	أفقيًا
`column-reverse`	عمودي، من الأسفل إلى الأعلى	أفقي	عموديًا	أفقيًا

في صفحة من اليمين إلى اليسار (dir="rtl")، مثل صفحة عربية، يبدأ row من الحافة اليمنى، لأن المحور الرئيسي يتبع اتجاه الكتابة.

خصائص الحاوية

توضع هذه على العنصر الذي عليه display: flex:

الخاصية	ماذا تفعل	الافتراضي
`flex-direction`	صف أم عمود، وبأي اتجاه	`row`
`flex-wrap`	هل تنتقل العناصر إلى سطر جديد حين تنفد المساحة	`nowrap`
`flex-flow`	اختصار لـ `flex-direction` و`flex-wrap`	`row nowrap`
`justify-content`	الموضع والتباعد على المحور الرئيسي	`normal` (تتصرف كـ `flex-start`)
`align-items`	موضع العناصر على المحور العرضي	`normal` (تتصرف كـ `stretch`)
`align-content`	التباعد بين الأسطر حين تلتف العناصر	`normal`
`gap`	المسافة بين العناصر (`row-gap`، `column-gap`)	`0`

لكل من justify-content وalign-items صفحتها الخاصة بكل القيم: justify-content وalign-items. والالتفاف والاتجاه في صفحة flex-wrap.

خصائص العناصر: flex-grow وflex-shrink وflex-basis

توضع هذه على الأبناء وتقرر كيف يتقاسمون عرض الحاوية:

flex-basis: الحجم الذي يبدأ منه العنصر قبل توزيع المساحة الحرة (auto تعني «استخدم عرضي أو محتواي»).
flex-grow: كم حصة يأخذ العنصر من المساحة المتبقية. 0 تعني أنه لا يكبر أبدًا.
flex-shrink: كم يتنازل العنصر حين لا تكفي المساحة. 0 تعني أنه لا يصغر أبدًا.

يضبط الاختصار flex الثلاثة معًا:

تكتب	ومعناها	السلوك
`flex: initial` (الافتراضي)	`0 1 auto`	بحجم المحتوى، يمكن أن يصغر، ولا يكبر أبدًا
`flex: 1`	`1 1 0%`	يبدأ من صفر ويأخذ حصة متساوية من المساحة
`flex: auto`	`1 1 auto`	حجم المحتوى إضافةً إلى حصة من المساحة المتبقية
`flex: none`	`0 0 auto`	بمحتواه أو عرضه بالضبط، لا يكبر ولا يصغر أبدًا
`flex: 2`	`2 1 0%`	ضعف حصة العنصر الذي عليه `flex: 1`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex grow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; width: 480px; background: #e5e7eb; padding: 8px; margin-bottom: 8px; }
    .row div { background: #2563eb; color: white; padding: 8px 0; text-align: center; }
    .one { flex: 1; }
    .row .two { flex: 2; background: #16a34a; }
    .row .none { flex: none; width: 100px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row"><div class="one">flex: 1</div><div class="one">flex: 1</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="one">flex: 1</div><div class="two">flex: 2</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="none">flex: none</div><div class="one">flex: 1</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.row')].map((row) =>
      [...row.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(' + ')
    ).join(' | ');
  </script>
</body>
</html>

عرض كل صف 480px داخل حشوه، والفجوتان بعرض 8px تتركان 464px للعناصر. تُظهر العروض المطبوعة كيف قُسمت: نحو 155px لكل عنصر في الصف الأول، و116 + 232 + 116 في الثاني (العنصر ذو flex: 2 يأخذ ضعف حصة كل من جاريه)، و100 + 372 في الثالث، حيث يحتفظ العنصر ذو flex: none بعرضه ويأخذ العنصر الآخر كل الباقي.

تخطيطات حقيقية بـ flexbox

الترويسة التي فيها شعار في البداية وروابط في النهاية هي تخطيط flex الأكثر شيوعًا. margin-inline-start: auto على عنصر واحد تلتهم كل المساحة الحرة قبله وتدفعه هو وكل ما بعده إلى النهاية (في صفحة عربية تكون البداية على اليمين والنهاية على اليسار):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nav bar</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    nav { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #111827; }
    nav a { color: white; text-decoration: none; }
    .logo { font-weight: 700; font-size: 20px; }
    .push { margin-inline-start: auto; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <nav>
    <a class="logo" href="#">Logo</a>
    <a class="push" href="#">Docs</a>
    <a href="#">Pricing</a>
    <a class="cta" href="#">Sign up</a>
  </nav>
</body>
</html>

تحاذي align-items: center نص الشعار الأكبر مع الروابط، وتباعد gap بين الروابط من دون هوامش تحتاج إلى إلغائها على الأخير.

نمط يومي ثانٍ هو صف الوسائط: أيقونة بحجم ثابت ونص يأخذ الباقي ويلتف داخل عموده.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media object</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .media { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; }
    .avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #16a34a; }
    .text { flex: 1; min-width: 0; margin: 0; }
  </style>
</head>
<body>
  <div class="media">
    <div class="avatar"></div>
    <p class="text">This text wraps next to the circle. However long it gets, the circle keeps its 48px size because it has flex: none.</p>
  </div>
</body>
</html>

flex: none هي الضمانة. عناصر flex تصغر افتراضيًا، فإن حذفتها من الدائرة وحذفت أيضًا flex: 1 من النص، تضغط الفقرة الدائرة إلى عرض نحو 23px: شكل بيضاوي. لتوسيط شيء واحد في صندوق يكفي flexbox سطران (justify-content: center; align-items: center)؛ وتقارن صفحة توسيط div ذلك بالطرق الأخرى.

order وسهولة الوصول

تغيّر الخاصية order والاتجاهات -reverse مكان ظهور العناصر، لا مكانها في HTML. قارئات الشاشة ومفتاح Tab ما زالت تتبع ترتيب HTML، فقد يقفز مستخدم لوحة المفاتيح من أول رابط على الشاشة إلى آخرها. استخدمها للزخرفة فقط؛ وحين يكون للترتيب معنى، غيّر HTML.

Flexbox أم grid

يعمل Flexbox في اتجاه واحد في كل مرة: العناصر في الصف تتحدد أحجامها من محتواها، والسطر الثاني (مع الالتفاف) لا يصطف مع الأول. أما grid فيعمل في اتجاهين: تعرّف الأعمدة والصفوف وتستقر العناصر فيها. شريط التنقل أو شريط الأدوات أو صف النموذج مهمة flexbox؛ ومعرض الصور أو الصفحة ذات الشريط الجانبي مهمة grid.

أخطاء شائعة

display: flex على العنصر بدل الأب. الحاوية هي التي تأخذ display: flex؛ وأبناؤها هم العناصر.
توقع أن تحرك align-items العناصر عموديًا من دون ارتفاع. إن كانت الحاوية بارتفاع أطول عنصر فيها فقط، فلا مجال للحركة. أعطِ الحاوية ارتفاعًا، أو اعلم أنها تعمل لكن ليس لديها ما تفعله.
نص يفيض بدل أن يتقلص. لعناصر flex القيمة min-width: auto. أضف min-width: 0 إلى العنصر الذي يجب أن يتقلص.
استخدام flex: 1 والتساؤل عن سبب اختلاف العروض. العناصر ذات flex: 1 تتقاسم المساحة بالتساوي، لكن العنصر الذي لا يتسع محتواه (رابط URL طويل، صورة) لن يصغر عنه. وmin-width: 0 تصلح ذلك أيضًا.
هوامش بين العناصر. استخدم gap على الحاوية؛ فهي تقع بين العناصر فقط.
تداخل flex بلا حاجة. الأبناء المباشرون وحدهم عناصر flex. الأحفاد يتبعون التخطيط العادي ما لم يكن أبوهم المباشر أيضًا display: flex.

الأسئلة الشائعة

ماذا تفعل display: flex؟

تحوّل العنصر إلى حاوية flex. يصبح أبناؤه المباشرون عناصر flex ويوضعون افتراضيًا في صف، جنبًا إلى جنب، ممدودين إلى الارتفاع نفسه، وتتحكم خصائص مثل justify-content وalign-items وgap في كيفية تقاسمهم المساحة.

ماذا تعني flex: 1؟

flex: 1 اختصار لـ flex: 1 1 0%: يمكن للعنصر أن يكبر (flex-grow: 1)، ويمكن أن يصغر (flex-shrink: 1)، ويبدأ من حجم صفر (flex-basis: 0%). العناصر التي لها كلها flex: 1 تتقاسم المساحة الحرة بالتساوي، فتنتهي بالعرض نفسه ما لم يكن محتواها لا يتسع.

ما الفرق بين justify-content وalign-items؟

تضع justify-content العناصر على المحور الرئيسي (أفقيًا في الصف)، وتضعها align-items على المحور العرضي (عموديًا في الصف). مع flex-direction: column يتبادل المحوران، فتصبح justify-content عمودية.

هل أستخدم flexbox أم grid؟

استخدم flexbox لصف أو عمود واحد تتحدد أحجام عناصره من محتواها: أشرطة التنقل، ومجموعات الأزرار، وتسمية بجانب حقل إدخال. واستخدم grid حين تريد صفوفًا وأعمدة تصطف مع بعضها، مثل شبكة بطاقات أو تخطيط صفحة.

لماذا يتجاوز عنصر flex حاويته؟

لعنصر flex القيمة min-width: auto افتراضيًا، فيرفض أن يصغر عن عرض أطول كلمة فيه أو أعرض ابن له. اضبط min-width: 0 (أو overflow: hidden) على العنصر كي يتمكن من التقلص، مثلًا لكي تعمل text-overflow: ellipsis.

هل يعمل flexbox على العناصر السطرية مثل span؟

نعم. أي عنصر عليه display: flex حاوية flex، ويصبح أبناؤه عناصر flex مهما كانت قيمة display الخاصة بهم، فيتوقف أبناء <span> عن كونهم سطريين ويقبلون العرض والارتفاع والهامش مثل العناصر الكتلية.

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