الصندوق المرن - Flexbox

Flexbox هو نموذج تخطيط مرن يمكّنك من إنشاء تخطيطات مستجيبة بسهولة.

المفاهيم الأساسية:

• حاوية Flex: العنصر الذي يحتوي على عناصر Flex.
• عناصر Flex: العناصر الموجودة داخل حاوية Flex.
• اتجاه Flex: يحدد كيفية ترتيب عناصر Flex (أفقيا أو رأسيا).
• التفاف Flex: يحدد ما إذا كانت عناصر Flex يجب أن تنكسر إلى أسطر جديدة أو تظل في سطر واحد.
• محاذاة العناصر: يحدد كيفية محاذاة عناصر Flex داخل الحاوية.
• تبرير المحتوى: يحدد كيفية توزيع المساحة الفارغة المتبقية في الحاوية.

مثال CSS:

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

هذا المثال ينشئ حاوية Flex حيث:

• يتم ترتيب عناصر Flex أفقيا (row).
• تتمحور عناصر Flex أفقيا.
• تتمحور عناصر Flex عموديا.

إرشادات لسهولة الوصول والاستخدام:

• استخدم اتجاه Flex بذكاء لضمان سهولة التنقل عبر عناصر Flex باستخدام لوحة المفاتيح.
• استخدم التباعد المناسب بين عناصر Flex لجعل النص سهل القراءة.
• استخدم الألوان المتناقضة لتمييز عناصر Flex عن الخلفية.