قريبا هنزل الشرح باذن الله

ال flex هو تقنية في css لترتيب العناصر على خط واحد، أفقي (الوضع الإفتراضي) أوعامودي.

- يتم وضع display:flex للعنصر الاب الذي يحتوي العناصر المراد ترتيبها.
- الوضع الإفتراضي، إنه العناصر تقرب من بعضها وتصير على الجهة اليسار من الcontainer.
- الآن تبدأ بالتحكم في الاب والابناء لوضع الترتيب اللي يناسبك.

📍في خصائص يجب وضعها هلى container مثل:
flex-direction: column;
اذا كنت تحتاج ترتيب الابناء بوضع عامودي. لكن سيكون الابناء برضو ملاصقين لبعض في الأعلى.
- الا اذا استخدمت احد الخصائص المحددة لتغيير هذا الترتيب.
مثلاً:
justify-content: center;
هذه مثلاً ستحعل الابناء في منتصف الcontainer بالعرض
وايضا:
align-items: center;
ستجعل الابناء في منتصف الاب عامودياً
وهذه الخصائص لها قيم أخرى مثل
flex-end, space-between, space-around, space-evenly

توجد ايضاً خاصية أخرى للcontainer وهي:
Align-content
وهي تتحكم بوضع كل العناصر الابناء ككتلة واحدة. وليس كل عنصر على حدة.
وتقبل قيم مثل:
flex-start, flex-end, center, stretch, space-between, space-around

📍خصائص الأبناء:
مجموعك من الخصائص يتم وضعها على الابناء للتحكم في سلوكهم داخل الاب.

Order
للتحكم في ترتيب الابناء داخل العنصر الاب.

flex-grow
للتحكم في كل عنصر، هل يتمدد او لا مع زيادة مساحة الاب

flex-shrink
للتحكم في كل عنصر، هل يتقلص او لا مع تناقص مساحة الاب.

flex-basis
للتحكم في عرض العنصر الابن واعطاؤه عرض معين.

align-self
هنا يمكنك تغيير القيمة المحددة مسبقاً في align-items لعنصر معين دون بقية الابناء.


هذه خلاصة اوامر الflex
بتحتاج انك تعطي القيم المناسبة في المكان المناسب لتحصل على الترتيب اللي بدك ياه.

لو ترسل شو بالضبط اللي بدك تعمله، ممكن اساعدك في اكواد مخصصة لحل المشكلة.

مواقع مهمه لمصممين المواقع ❤

موقع تختار منه نوع الخط
⁦ https://fonts.google.com⁩

موقع تختار منه صور الموقع
⁦ https://www.pexels.com/⁩

موقع تختار منه ألوان التصميم
⁦ https://coolors.co/⁩

موقع تختار منه الأيقونات
⁦ https://fontawesome.com⁩

موقع تتعلم منه تريكات تعملها بال CSS
https://css-tricks.com/

لو اي حاجه وقفت معاك وانت بتشتغل روح على الموقع هذا هتلاقي الاجابه
stackoverflow.com

طبعا وارد انك تنسى syntax خاص بكود معين ف تروح بقا على الموقع ده وهتلاقي بنية الكود الصحيحة
https://syntaxdb.com

موقع هتلاقي فيه كل الادوات اللي تحتاجها ک فرونت اند
http://frontendtools.com/

هذا موقع في ملخصات للغات برمجة كتير ممكن تحتاجه ف حطيته معاهم
http://overapi.com/

هذا موقع تعرف منه سرعة الموقع بتاعك
https://gtmetrix.com/


@codedevelopment