في هذا الدرس 6تصفّح المواضيع
عند تفعيل التفاف العناصر عبر flex-wrap: wrap على الحاوية المرنة، تنكسر العناصر الفائضة لتشكّل سطرين مرنين أو أكثر. وإذا امتلكت الحاوية ارتفاعاً صريحاً عبر height أو min-height يفوق مجموع ارتفاعات تلك الأسطر، تظهر مساحة فارغة متبقية على المحور المتعامد.
تُكتب خاصية align-content على الحاوية الأب لتجميع تلك الأسطر الملتفة أو توزيع الفراغ بينها. احفظ شرطي عملها الحاسمين: تفعيل الالتفاف flex-wrap: wrap (أو wrap-reverse) مع توفر مساحة متعامدة فائضة؛ أما في الحاوية ذات السطر الواحد nowrap فلا تملك هذه الخاصية أي أثر على الإطلاق.
لماذا تتباعد صفوف الأوسمة الملتفة داخل صندوق بارتفاع 180px بفراغ رأسي واسع غير مرغوب فيه فور انتقالها لسطر ثانٍ؟ السبب هو القيمة الافتراضية الابتدائية align-content: stretch التي تقسم الارتفاع الفائض على مسارات الأسطر لتتمدد وتملأ الحاوية.
بمجرد تغيير القيمة إلى align-content: center يلغى تمدد المسارات وتجتمع جميع الأسطر الملتفة متقاربة في منتصف الحاوية تماماً مع الحفاظ على فجوة gap الأنيقة بينها:
.tags-center {
display: flex;
flex-wrap: wrap;
align-content: center;
gap: 8px;
height: 150px;
}في اللوحات الجانبية للفلاتر وسُحب الكلمات المفتاحية التي تمتلك min-height مرتفعاً، تحتاج دائماً إلى رصّ الصفوف الملتفة من الأعلى بتتابع منتظم دون أن تتمدد وتتفكك. تحقق القيمة align-content: flex-start هذا الهدف بضم جميع الأسطر عند الحافة العلوية، بينما تدفع align-content: flex-end كتلة الأسطر مجتمعةً نحو قاع الحاوية:
.cloud-top {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 8px;
min-height: 140px;
}بنفس المنطق الحسابي لخاصية المحور الرئيسي، تدعم align-content قيم التوزيع الثلاث لفصل الأسطر الملتفة رأسياً:
space-between: تثبّت السطر الأول في أعلى الحاوية والسطر الأخير في أسفلها وتوزع الفراغ الرأسي المتبقي بين الأسطر فقط.space-around: تحيط كل سطر بنصف مسافة متساوية من الأعلى والأسفل فتكون حافتا الحاوية نصف الفجوة بين السطرين.space-evenly: تمنح مسافات رأسية متطابقة تماماً فوق السطر الأول وبين الأسطر وتحت السطر الأخير.
قارن بصرياً بين flex-start و center و space-between في المختبر التفاعلي التالي:
يمثل التمييز الواضح بين align-items و align-content مفتاح الإتقان الكامل للمحور المتعامد:
align-itemsتعمل داخل كل سطر على حدة؛ كأن تتوسط شارة قصيرة بجانب زر أطول منها يقع معها في نفس السطر، وتعمل سواء كان لديك سطر واحد أم عدة أسطر.align-contentتعمل بين الأسطر الملتفة ككتل كاملة؛ فتقرر هل يجتمع السطر الأول والسطر الثاني في الأعلى أم في المنتصف أم يتباعدان نحو الحافتين.
شاهد في المثال القابل للتشغيل أدناه كيف تتعاون الخاصيتان معاً دون أي تعارض على نفس الحاوية:
.combo-box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
align-items: center;
height: 170px;
}إذا كتبت align-content: center ولم تلاحظ أي استجابة، فافتح لوحة Styles في أدوات المطور DevTools؛ ستجد المتصفح يظلل السطر بلون باهت مع أيقونة إرشادية توضح أن غياب flex-wrap: wrap يمنع تكوّن أسطر متعددة. راجع جدول المقارنة الشامل التالي:
القيمة في align-content | نطاق التأثير | سلوك الأسطر الملتفة | النمط التطبيقي الأشهر |
|---|---|---|---|
stretch | الأسطر الملتفة | تمدد مسارات الأسطر لملء الارتفاع | شبكات المربعات الممتدة داخل ارتفاع ثابت |
flex-start | الأسطر الملتفة | تجميع كافة الصفوف في بداية الحاوية | سُحب الكلمات المفتاحية وفلاتر البحث |
flex-end | الأسطر الملتفة | تجميع كافة الصفوف في نهاية الحاوية | أوسمة التصنيف المثبتة أسفل البطاقات |
center | الأسطر الملتفة | ضم جميع الصفوف متلاصقة بالوسط | مجموعات الشارات المتوسطة بعدة صفوف |
space-between | الأسطر الملتفة | تثبيت أول وآخر صف على الحافتين | لوحات المؤشرات المكونة من صفين متباعدين |
space-around / space-evenly | الأسطر الملتفة | فواصل محيطية نصفية أو متساوية تماماً | جدران الشعارات المتعددة الصفوف بتوازن بصري |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرّفت في هذا الدرس على شروط عمل align-content بوجود الالتفاف flex-wrap: wrap وارتفاع متاح، وكيفية ضم صفوف الأوسمة بـ flex-start و center، والفرق الجوهري بينها وبين align-items. في الخطوة التالية ننتقل إلى درس خاصية order مع Flexbox في لغة CSS للتحكم في الترتيب البصري لظهور العناصر المرنة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Multi-Line Flex Container الحاوية المرنة متعددة الأسطر
- حاوية فليكس فُعّل عليها الالتفاف flex-wrap: wrap أو wrap-reverse لتنتقل العناصر الفائضة إلى سطرين أو أكثر.
- للمراجعة
- 02 Line Track Packing تجميع مسارات الأسطر
- استخدام قيم مثل flex-start أو center في align-content لضم الصفوف الملتفة معاً بدلاً من تمدد المسافات الرأسية بينها.
- للمراجعة
- 03 Inactive CSS Property الخاصية غير النشطة في أدوات الفحص
- قاعدة CSS صحيحة نحوياً يظللها المتصفح في لوحة Styles لغياب شرط تفعيلها الأساسي مثل flex-wrap: wrap.
- للمراجعة
- 04 Cross-Axis Free Space فراغ المحور المتعامد
- المساحة الفائضة في ارتفاع أو عرض الحاوية بعد طرح مجموع أحجام الأسطر المرنة الملتفة بداخلها.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- لغة الأنماط المسؤولة عن توزيع الأسطر المتعددة الملتفة عبر خاصية align-content.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- شجرة عناصر المستند الحية التي تفحصها في أدوات المطور للتحقق من حالة التفاف الحاوية المرنة.
- للمراجعة
- 03 UI UI
- User Interface
- أنماط واجهة المستخدم مثل سُحب الوسوم ولوحات الفلاتر التي تعتمد على الأسطر المرنة الملتفة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح محرر سحابة الوسوم وغيّر قيمة align-content في الصنف .cloud-top من flex-start إلى stretch ثم إلى center لملاحظة تمدد الأسطر وتجمعها.
-
في مثال الدمج الثالث، أبقِ على align-content: space-between وغيّر align-items من center إلى flex-end لمراقبة تحرك العناصر داخل كل سطر باستقلالية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.