اكواد الالوان
#Css

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

ال 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
بتحتاج انك تعطي القيم المناسبة في المكان المناسب لتحصل على الترتيب اللي بدك ياه.

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