الكثير من المبتدئين في مجال الويب عند إستخدام ال flex أو ال grid
لا يستطيعون إدراك الفرق بين محاذاة العناصر بإستخدام
align-content
و
align-items
في هذا الثريد سوف نوضح
الفرق بينها
قراءة ممتعة 😇
🧵👇🏻
لا يستطيعون إدراك الفرق بين محاذاة العناصر بإستخدام
align-content
و
align-items
في هذا الثريد سوف نوضح
الفرق بينها
قراءة ممتعة 😇
🧵👇🏻
✳ align-items
في هذه الخاصية نستطيع
محاذاة العناصر التي تكون في سطر وأحد
نلاحظ في الصورة تحت
أن جميع العناصر في سطر وأحد
👇🏻
في هذه الخاصية نستطيع
محاذاة العناصر التي تكون في سطر وأحد
نلاحظ في الصورة تحت
أن جميع العناصر في سطر وأحد
👇🏻
✳ align-content
في هذه الخاصية نستطيع محاذاة العناصر التي توجد في أكثر من سطر
بما أني أستخدم ال flex
يجب أن يحتوي عنصر ال flex الأب على
flex-wrap: wrap
معا تحديد عرض محدد للعناصر الأبناء
بهذه الطريقة نستطيع امتلاك أكثر من سطر
الصور تحت توضح الفرق بين قيم الخاصية.
👇🏻
في هذه الخاصية نستطيع محاذاة العناصر التي توجد في أكثر من سطر
بما أني أستخدم ال flex
يجب أن يحتوي عنصر ال flex الأب على
flex-wrap: wrap
معا تحديد عرض محدد للعناصر الأبناء
بهذه الطريقة نستطيع امتلاك أكثر من سطر
الصور تحت توضح الفرق بين قيم الخاصية.
👇🏻
نلاحظ في الصور السابقة وجود اكثر من سطر
و بإستخدام قيم ال align-content
نستطيع تغيير محاذاة العناصر كما نريد
⛔ إذا لم يحتوي العنصر الأب على أكثر من سطر لن تعمل الخاصية.
نستطيع بكل سهولة إستخدام ال
align-content و align-items
في نفس الأب
مثال الصورة تحت 👇🏻
و بإستخدام قيم ال align-content
نستطيع تغيير محاذاة العناصر كما نريد
⛔ إذا لم يحتوي العنصر الأب على أكثر من سطر لن تعمل الخاصية.
نستطيع بكل سهولة إستخدام ال
align-content و align-items
في نفس الأب
مثال الصورة تحت 👇🏻
نلاحظ في الصورة تحت
وجود عنصرين
يمتلكون هامش (padding)
داخلي مختلف عن باقي العناصر
في هذه الحالة
align-content
تتحكم في محاذاة العناصر الموجودة في أسطر مختلفه
و align-items
تتحكم في محاذاة العناصر في نفس السطر
وجود عنصرين
يمتلكون هامش (padding)
داخلي مختلف عن باقي العناصر
في هذه الحالة
align-content
تتحكم في محاذاة العناصر الموجودة في أسطر مختلفه
و align-items
تتحكم في محاذاة العناصر في نفس السطر
وصلنا إلى نهايه هذا الثريد 🧙🏼♂️
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
نلتقي في ثريد أخر 😇
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
نلتقي في ثريد أخر 😇
جاري تحميل الاقتراحات...