❗️دعونا نفهم أساسيات CSS Flexbox❗️
flexbox هو نموذج تخطيط أحادي الأبعاد يمكن استخدامه لإنشاء تخطيطات محور الصفوف والأعمدة
ثريد🧵
flexbox هو نموذج تخطيط أحادي الأبعاد يمكن استخدامه لإنشاء تخطيطات محور الصفوف والأعمدة
ثريد🧵
يحتوي Flexbox على بعض الخصائص ، ولا تحتاج إلى تعلمها جميعًا
فيما يلي بعض الخصائص التي ستستخدمها كثيرًا أثناء إنشاء التخطيطات في موقعك:
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-self
فيما يلي بعض الخصائص التي ستستخدمها كثيرًا أثناء إنشاء التخطيطات في موقعك:
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-self
أولاً ، تقوم بعمل container بخاصية flexbox باستخدام
display: flex;
الآن دعنا ننتقل إلى المثال الأول الذي سنتعلم فيه كيفية توسيط الحاوية
display: flex;
الآن دعنا ننتقل إلى المثال الأول الذي سنتعلم فيه كيفية توسيط الحاوية
مثال 1
لدينا صفحتنا التي يوجد بها 3 مربعات وعلينا توسيطها
لهذا ، سوف نستخدم الخاصية الثانية والثالثة مما سبق
لدينا صفحتنا التي يوجد بها 3 مربعات وعلينا توسيطها
لهذا ، سوف نستخدم الخاصية الثانية والثالثة مما سبق
كما استخدمنا display: flex؛ ، يمكنك أن ترى أن جميع الصناديق الثلاثة مرتبة في صف واحد
والآن سنقوم بتطبيق justify-content: center; لتوسيطها أفقيًا
يتم استخدام خاصية align-items لتوسيط الحاوية عموديًا
والآن سنقوم بتطبيق justify-content: center; لتوسيطها أفقيًا
يتم استخدام خاصية align-items لتوسيط الحاوية عموديًا
في المثال أعلاه ، تعلمنا أن استخدام هذه الخصائص الثلاثة سيؤدي إلى توسيطها بسهولة بالغة
الآن ، في المثال الثاني ، سنتعلم كيف نرتب هذه الصناديق أفقيًا
الآن ، في المثال الثاني ، سنتعلم كيف نرتب هذه الصناديق أفقيًا
مثال 2
هنا ، سنستخدم خاصية justify-content ، هذه الخاصية لها العديد من القيم لكن 3 خصائص منها تستخدم لضبط المسافات بين أكثر من صندوق
هنا ، سنستخدم خاصية justify-content ، هذه الخاصية لها العديد من القيم لكن 3 خصائص منها تستخدم لضبط المسافات بين أكثر من صندوق
1- space-between:
تستخدم هذه الخاصية لوضع كل المساحة المتاحة بين الصناديق
تذكر أن كل المساحة التي تم الحصول عليها ستكون من الحاوية الأصلية
تستخدم هذه الخاصية لوضع كل المساحة المتاحة بين الصناديق
تذكر أن كل المساحة التي تم الحصول عليها ستكون من الحاوية الأصلية
2-space-around:
تُستخدم هذه الخاصية لوضع كل المساحة المتوفرة حول الصناديق الفرعية.
تذكر أن كل المساحة الموزعة ستبدأ في التناقص مع زيادة عدد المربعات ، بكلمات بسيطة ، كلما زادت الصناديق ، قلت المساحة
تُستخدم هذه الخاصية لوضع كل المساحة المتوفرة حول الصناديق الفرعية.
تذكر أن كل المساحة الموزعة ستبدأ في التناقص مع زيادة عدد المربعات ، بكلمات بسيطة ، كلما زادت الصناديق ، قلت المساحة
3- space-evenly:
تستخدم هذه الخاصية لتوزيع كل المساحة المتاحة بطريقة متساوية
تذكر أن space-around توفر مساحة بنصف حجم بينما توزع هذه الخاصية المساحة بالتساوي
تستخدم هذه الخاصية لتوزيع كل المساحة المتاحة بطريقة متساوية
تذكر أن space-around توفر مساحة بنصف حجم بينما توزع هذه الخاصية المساحة بالتساوي
في المثال الثاني ، سنستخدم قيمة المسافة بالتساوي space-evenly
سيكون الناتج:
لاحظ ان الصناديق ليست على مستوى واحد
سيكون الناتج:
لاحظ ان الصناديق ليست على مستوى واحد
♦️flex-wrap♦️
يتم استخدام خاصية الالتفاف المرنة flex-wrap لتحديد أن العناصر ستلتف أم لا
ستلتف العناصر عندما يتعذر ضبطها في صف واحد
يتم استخدام خاصية الالتفاف المرنة flex-wrap لتحديد أن العناصر ستلتف أم لا
ستلتف العناصر عندما يتعذر ضبطها في صف واحد
♦️Align-self♦️
يتم استخدام خاصية Align-self لتجاوز قيمة خاصية align-items ويتم استخدام خاصية align-self في العناصر الفرعية للحاوية المرنة
يتم استخدام خاصية Align-self لتجاوز قيمة خاصية align-items ويتم استخدام خاصية align-self في العناصر الفرعية للحاوية المرنة
هنا ، يكون ارتفاع المربع الأول أقل من المربعات الأخرى
لذلك سنستخدم خاصية align-self مع قيمة baseline للعنصر box نفسه بحيث تتم محاذاة العنصر الأول وفقًا لخط الأساس الخاص به
لذلك سنستخدم خاصية align-self مع قيمة baseline للعنصر box نفسه بحيث تتم محاذاة العنصر الأول وفقًا لخط الأساس الخاص به
♦️flex-direction♦️
أخيرًا وليس آخرًا ، يحدد الاتجاه المرن flex-direction اتجاه العناصر الفرعية ، ويمكن أن يكون:
- row
- row-reverse
- column
- column-reverse
أخيرًا وليس آخرًا ، يحدد الاتجاه المرن flex-direction اتجاه العناصر الفرعية ، ويمكن أن يكون:
- row
- row-reverse
- column
- column-reverse
بهذا نكون قد تعلمنا عن بعض اساسيات flexbox
اتمنى انكم تعلمتم شيئا جديدا ً
لا تنس اعادة التغريد حتى يستفيد الجميع🙏
اتمنى انكم تعلمتم شيئا جديدا ً
لا تنس اعادة التغريد حتى يستفيد الجميع🙏
جاري تحميل الاقتراحات...