CSS Academy · درس

Flex Wrap وAlign-Content

اسمح لعناصر flex بالالتفاف إلى أسطر متعددة، وحاذِ الأسطر الملتفة باستخدام align-content.

Flex Wrap وAlign-Content درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

flex-wrap: nowrap (الافتراضي)

لا تلتف عناصر flex افتراضيًا. فإذا تجاوزت العناصر عرض الحاوية، فإنها تنكمش أو تتجاوز الحاوية بدلًا من الانتقال إلى سطر جديد.

flex-wrap: wrap

عند استخدام flex-wrap: wrap، تلتف العناصر التي تتجاوز المحور الرئيسي إلى سطر جديد (أو عمود جديد في الاتجاه العمودي). ويتصرف كل سطر ناتج عن الالتفاف كأنه حاوية flex مصغّرة مستقلة.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

تلتف wrap-reverse بالعناصر في الاتجاه المعاكس للمحور المتقاطع: فتظهر الأسطر الجديدة أعلى العناصر (في الاتجاه الأفقي) بدلًا من أسفلها.

نمط البطاقات الملتفة

تخطيط بطاقات متجاوب تقليدي، تنتقل فيه البطاقات إلى الصف التالي مع تقلص إطار العرض:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

align-content لعدة أسطر

تتحكم align-content في المسافات بين الأسطر الملتفة على المحور المتقاطع. ولا تأثير لها عند وجود سطر واحد فقط. وتشبه قيمها قيم justify-content.

قيم align-content

القيم المتاحة:

flex-start — تكديس الأسطر باتجاه بداية المحور المتقاطع
flex-end — تكديس الأسطر باتجاه نهاية المحور المتقاطع
center — توسيط الأسطر
space-between — توزيع مسافات متساوية بين الأسطر
space-around — توزيع مسافات متساوية حول الأسطر
stretch — تمديد الأسطر لملء المساحة (الافتراضية)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items مقارنةً بـ align-content

الفرق:

align-items — تحاذي العناصر داخل كل سطر من أسطر flex
align-content — تحاذي أسطر flex نفسها داخل الحاوية

الفجوة في Flex

تضيف الخاصية gap مسافة متسقة بين عناصر flex من دون استخدام الهوامش. وهي تعمل مع الفجوات بين الصفوف والأعمدة على حد سواء.

<div class="flex-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

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

التفف تلقائيًا إلى أكبر عدد ممكن من الأعمدة التي تتسع لها المساحة باستخدام حجم مثالي ثابت. ولا حاجة إلى استعلامات الوسائط:

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

الاختصار flex-flow

تجمع flex-flow بين flex-direction وflex-wrap في تصريح واحد:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

الالتفاف مقارنةً بـ Grid

بالنسبة إلى التخطيطات الثنائية الأبعاد المعقدة ذات الصفوف والأعمدة المحددة، يكون CSS Grid أنسب. أما التفاف Flexbox، فيناسب المحتوى أحادي الأبعاد الذي يمتد تلقائيًا إلى عدة أسطر.

تحقق سريع

ما الخاصية التي تحاذي أسطر الالتفاف نفسها عندما تحتوي حاوية flex على عدة صفوف؟

مراجعة

يسمح flex-wrap: wrap بانتقال العناصر إلى أسطر جديدة. وتتحكم align-content في المسافات بين هذه الأسطر داخل حاوية متعددة الأسطر. استخدم gap للحصول على مسافات متسقة. وادمج flex: 1 1 250px مع flex-wrap لإنشاء شبكات بطاقات متجاوبة من دون استعلامات الوسائط.

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

هل درس «Flex Wrap وAlign-Content» مجاني؟

نعم — نص درس «Flex Wrap وAlign-Content» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Flex Wrap وAlign-Content»؟

اسمح لعناصر flex بالالتفاف إلى أسطر متعددة، وحاذِ الأسطر الملتفة باستخدام align-content. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «Flex Wrap وAlign-Content»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy