CSS - Flex Container خصائص الحاوية
CSS - خصائص الحاوية Flex Container
🔸 عند تعيين display: flex أو inline-flex على عنصر، يُصبح هذا العنصر Flex Container، وجميع العناصر بداخله تُصبح Flex Items.
وفيما يلي أهم الخصائص الخاصة بالحاوية:
1. display
.container {
display: flex; /* يجعل الحاوية Flex Block */
/* أو */
display: inline-flex; /* يجعل الحاوية Flex داخل السطر */
}
2. flex-direction
🔹 تُحدد الاتجاه الرئيسي للعناصر داخل الحاوية (أفقي أو عمودي).
flex-direction: row; /* أفقي من اليسار لليمين (افتراضي) */
flex-direction: row-reverse; /* أفقي من اليمين لليسار */
flex-direction: column; /* عمودي من الأعلى للأسفل */
flex-direction: column-reverse;/* عمودي من الأسفل للأعلى */
3. flex-wrap
🔹 تُحدد هل يُسمح للعناصر بالانتقال لسطر جديد عند امتلاء السطر الحالي.
flex-wrap: nowrap; /* لا يلتف (افتراضي) */
flex-wrap: wrap; /* يلتف لأسفل */
flex-wrap: wrap-reverse; /* يلتف لأعلى */
4. flex-flow
🔹 اختصار لـ flex-direction و flex-wrap.
flex-flow: row wrap;
5. justify-content
🔹 تُحدد المحاذاة الأفقية للعناصر داخل الحاوية.
justify-content: flex-start; /* من اليسار (افتراضي) */
justify-content: flex-end; /* من اليمين */
justify-content: center; /* في المنتصف */
justify-content: space-between; /* مسافات متساوية بين العناصر */
justify-content: space-around; /* مسافات متساوية حول العناصر */
justify-content: space-evenly; /* نفس المسافة تمامًا بين وحول العناصر */
6. align-items
🔹 تُحدد المحاذاة الرأسية للعناصر في السطر الواحد.
align-items: stretch; /* تمدد العناصر لملء الحاوية (افتراضي) */
align-items: flex-start; /* من الأعلى */
align-items: flex-end; /* من الأسفل */
align-items: center; /* في المنتصف عموديًا */
align-items: baseline; /* على خط أساس النص */
7. align-content
🔹 تُستخدم عند وجود عدة صفوف (عندما يكون flex-wrap مفعّلًا) لتحديد توزيع الصفوف عموديًا.
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch; /* افتراضي */
📌 ملاحظات سريعة
justify-content= المحاذاة الأفقية.align-items= المحاذاة الرأسية (في صف واحد).align-content= المحاذاة الرأسية (لأكثر من صف).- لرؤية تأثير
align-contentفعليًا، لازم يكون فيهflex-wrap: wrapوعدة صفوف.
تعليقات
إرسال تعليق