تعلم flexbox

أصبح نظام CSS FLEXBOX جزءً لا يتجزأ من تصاميم الويب الحديثة، وبات من المهارات الأساسية التي يجب على مصممي الواجهات الأمامية لتطبيقات الويب اكتسابها وإتقانها جيدا.
في هذه الدورة، ستتعلم كيفية استخدام CSS Flexbox لإنشاء تخطيطات حديثة ومتجاوبة لمشاريع الويب الخاصة بك. Flexbox هي أداة قوية تسمح لك بترتيب ومحاذاة العناصر داخل الحاوية بغض النظر عن حجمها أو ترتيبها. مع Flexbox ، يمكنك بسهولة إنشاء تخطيطات معقدة تتكيف مع أحجام الشاشة المختلفة، مما يجعل موقعك يبدو رائعًا على أي جهاز.

تم تصميم هذه الدورة للمبتدئين والمطورين الذين يرغبون في إتقان CSS Flexbox.
سنبدأ بالأساسيات من Flexbox، مثل حاوية Flex وعناصر Flex، ومن ثم ننتقل إلى مفاهيم أكثر تقدمًا مثل اتجاه Flex والمحاذاة والترتيب.

نظام FLEXBOX حديث وجاء لتلبية حاجيات تصاميم وتطبيقات الويب التي عرفت قفزة نوعية في السنين الأخيرة مع الطفرة التقنية. الإعتماد على Floating لم يعد الحل المثالي لإنشاء تصاميم حديثة ومتجاوبة، وليس غريبا بأن جل أطر العمل الخاصة بالواجهات الأمامية مثل بوتستراب 4 انتقلت للإعتماد على نظام Flexbox وتخلت عن نظام Float الذي طالما شكل في الماضي العمود الفقري لنظام الشبكات (Grids) الخاص بها.

يتكون تصميم FlexBox من جزئين رئيسين : الحاوي (Container) والأبناء.

1. Introduction to CSS Flexbox

• What is CSS flexbox?

• Benefits of using flexbox

• Flex container and flex items

1. Flex Direction

• Understanding flex direction

• Row and column layout

• Reversing the order of items

1. Alignment

• Aligning items within a container

• Justifying content

• Aligning items vertically

1. Ordering

• Changing the order of flex items

• Using order property

etc.