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

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; */

بطاقات متجاوبة بالالتفاف ومن دون استعلام وسائط

أعطِ كل عنصر حجمًا ابتدائيًا بـ 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 وتكون أطول من أسطرها.

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