ما هو ال Flexbox في CSS وليه بيتم استخدام ال 2022FLEX BOX 

المحتوى

1. التعريف الخاص ب Flexbox ؟
2. ليه  ب يتم استخدام ال FLEX BOX  ؟
3. الاكواد الخاصة بالعنصر الأب (parent element)
4. display: flex
5. flex-direction: row
6. flex-wrap: wrap
7. flex-flow: row wrap
8. justify-content: center
9. align-content: center
10. flex-flow: row wrap 
11. الاكواد الخاصة بالعنصر الابن (child element)
12. align-self: stretch
13. flex-grow: 0
14. flex-shrink: 1
15. flex: 0 1 auto
16. order: 0

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

منذ فتره طويله كان بيتم استخدام ال floats  و   positioning كانت تلك الادوات الوحيده الموثوقه لانشاء تخطيطات CSS  ولكن تلك الادوات كانت محدوده ومن الصعب تحقيق تصميمات التخطيط البسيطه باستخدام هذه الادوات وجاءت ال   FLEX BOX  لتحل تلك المشاكل وبذلك فهى تحمل بعض الخصائص منها:-

1. توسيط كتلة من المحتوى عموديا داخل عنصر الاب الخاص به.
2. جعل جميع اطفال الحاويه يستهلكون كمية متساوية من العرض و الارتفاع  ، بغض النظر عن مقدار العرض و الارتفاع المتاح.
3. جعل جميع الأعمدة في تخطيط متعدد الأعمدة تعتمد نفس الارتفاع حتى إذا كانت تحتوي على كمية مختلفة من المحتوى.
4. كما سترى في الأقسام اللاحقة ، يجعل flexbox الكثير من مهام التخطيط أسهل بكثير.

في هذه المقالة ، سنتعلم من خلال سلسلة من التمارين لمساعدتك على فهم كيفية عمل flexbox ولكن اولا دعونا نتعرف على عناصر ال flexbox  والتي تنقسم الى العناصر الخاصه بالأب والعناصر الخاصه بالأبن

الجزء الخاص بعنصر الأب (parent element)

 الجزء الخاص بعناصر الابن الذي يتواجد بداخل العنصر الاب (child elements)

الاكواد الخاصة بالعنصر الأب (parent element)

1. display: flex
2. flex-direction: row
3. flex-wrap: wrap
4. flex-flow: row wrap
5. justify-content: center
6. align-content: center

الاكواد الخاصة بالعنصر الابن (child element)

1. flex-grow: 0
2. flex-shrink: 1
3. flex-basis: auto
4. flex: 0 1 auto
5. order: 0

display: flex

عندما يتم وضع العناصر كعناصر مرنة   (display: flex) يتم وضعها على طول محورين:

المحور الرئيسي هو المحور الذي يعمل في الاتجاه الذي فيه  يتم وضع العناصر المرنة (على سبيل المثال، كصفوف عبر الصفحة، أو أعمدة أسفل الصفحة.) تسمى بداية ونهاية هذا المحور الmain-start  وmain-end.

المحور المتقاطع هو المحور الذي يعمل عموديا على الاتجاه الذي يتم وضع العناصر المرنة فيه. تسمى بداية ونهاية هذا المحور cross-start وcross-end.

التطبيق العملي

flex-direction

لتحديد  اتجاه المحور الرئيسي

اتجاه المحور الرئيسي بشكل افقي (flex-direction: row) 

اتجاه المحور الرئيسي بشكل راسي (flex-direction: column)

اتجاه المحورالرئيسي بشكل افقي بطريقه عكسيه من اليمين الى اليسار او العكس حسب اللغه الخاصه بالصفحه (flex-direction: row-reverse)

اتجاه المحورالرئيسي بشكل راسي بطريقه عكسيه من فوق الى تحت اوالعكس حسب اللغه الخاصه بالصفحه (flex-direction: column-reverse)

التطبيق العملي

justify-content

لمحاذاة العناصر على طول المحور الرئيسي (أفقيا، افتراضيا)

محاذاه على بدايه المحور الافقي (justify-content: flex-start)

محاذاه على نهايه المحور الافقي (justify-content:  flex-end)

 محاذاه على وسط المحور الافقي (justify-content: center )

 لترك مسافه بين العناصر (justify-content: space-between)

لتوزيع جميع العناصر بالتساوي على طول المحور الرئيسي مع ترك القليل من المساحة في كلا الطرفين (justify-content: space-around ) 

ملحوظه سيتم محاذاه العناصر على المحور الرئيسي على حسب اتجاه flex  اذا كان row فسيكون المحور الريئسى افقيا واذا كان الاتجاه column  فسيكون المحور الريئسى راسيا ولفهم ذلك انظر الى صوره ال flex في بدابه الصفحه

التطبيق العملي

align-content

لمحاذاة العناصر على طول المحاور المتقاطعة (عموديا، بشكل افتراضي)

محاذاه على بدايه المحور الراسي (align-content: flex-start)

محاذاه على نهايه المحور الراسي (align-content:  flex-end)

محاذاه على وسط المحور الراسي (align-content: center)

لترك مسافه بين العناصر (align-content: space-between)  

لتوزع جميع العناصر بالتساوي على طول المحور الرئيسي مع ترك القليل من المساحة في كلا الطرفين (align-content: space-around)

ملحوظه1 سيتم محاذاه العناصر على المحور الرئيسي على حسب اتجاه flex  اذا كان row فسيكون المحور الريئسى الراسي واذا كان الاتجاه column  فسيكون المحور الريئسى افقي ولفهم ذلك انظر الى صوره ال flex في بدابه الصفحه

ملحوظه2 ينطبق فقط عندما يكون هناك خطوط متعددة (flex-wrap: wrap)

التطبيق العملي

flex-wrap

للسماح للعناصر بالالتفاف في سطر جديد إذا كان حجم العناصر اكبر من حجم container

 القيمه الافتراضيه للعنصر (flex-wrap: no-wrap)

يسمح للعنصر بالالتفاف في سطر جديد (flex-wrap: wrap)

يسمح للعنصر بالالتفاف في سطر جديد بشكل عكسي على المحور الافقي (flex-wrap: wrap-reverse) 

التطبيق العملي

flex-flow

تلك العناصر تسمى بعناصر ال shorthand  لانها تتيح لنا دمج اكثر من عنصر فى عنصرواحد  وبالتالى فنها بذلك توفر لنا كود نظيف واضغر في الحجم وباستخدام عنصر flex-flow  فانه جعلنا نستغني عن flex-wrap و flex-direction

flex-flow: row wrap 

row :   تشير الى اتجاه الافقى للعنصر الرئيسى

wrap : تشير الى الالتفاف العنصر الى سطر جديد

التطبيق العملي

align-self

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

 سيتم محاذاة العنصر المرن عموديا بحيث يملأ المساحة الرأسية الكاملة للحاوية (align-self: stretch) 

 سيتم محاذاة العنصر المرن عموديا في الجزء العلوي من الحاوية (align-self: flex-start)

 سيتم محاذاة العنصر المرن عموديا في أسفل الحاوية. (align-self: flex-end)

 سيتم محاذاة العنصر المرن عموديا في وسط الحاوية. (align-self: center) 

 سيتم محاذاة العنصر المرن عند خط الأساس للمحور المتقاطع. (align-self: baseline)

التطبيق العملي

flex-grow: 0

للسماح لعنصر ما بالنمو (0 يعني لا ، 1+ يعني نعم)

متى نستخدم تلك الخاصيه؟

نستخدم تلك الخاصيه لما يكون ال container   اكبر من مجموع الابناء لانه سيكون هناك مساحه فارغه والقيمه الافتراضيه 0 ومعناها ان العنصر غير قابل للتمدد وعندما تكون القيمه 1 فاننا نسمح للعنصر بالتمدد ليقوم يملى باقى المساحه الفارغه داخل ال container

التطبيق العملي

flex-shrink: 1

للسماح لعنصر ما بالانكماش (0 يعني لا، 1+ يعني نعم)

متى نستخدم تلك الخاصيه؟

نستخدم تلك الخاصيه لما يكون مجموع الابناء  اكبر من  ال container وبالتالى الابناء ستخرج خارج المحتوى والقيمه الافتراضيه 1 ومعناها ان العنصر غير قابل للنكماش وعندما تكون القيمه 0 فاننا لا نسمح للعنصر بالانكماش

التطبيق العملي

flex-basis: auto

لتحديد عرض عنصر، بدلا من خاصية العرض

التطبيق العملي

flex: 0 1 auto

الاختصار الموصى به ل flex-grow ، shrink ، basis.

تلك العناصر تسمى بعناصر ال shorthand  لانها تتيح لنا دمج اكثر من عنصر فى عنصرواحد  وبالتالى فنها بذلك توفر لنا كود نظيف واضغر في الحجم وباستخدام عنصر flex: 0 1 auto   فانه جعلنا نستغني عن flex-grow ، shrink ، basis

التطبيق العملي

order: 0

يتحكم في ترتيب العناصر. -1 يجعل العنصر  ياتى فى المقدمه ، 1 يجعله الأخير

التطبيق العملي

الخاتمة

وفى نهاية هذه المقالة، أود أن أشكر كل من ساعدني بفكرة في إنجاز هذه المقالة، والذي يعلم الله كم المجهود الذي بذل فيها، كما ُأريد أن أشكر كل القراء على حُسن متابعتهم، سائلاً المولى عز وجل أن أكون وُفقت في توصيل الهدف من المقالة، ولأن مقالتنا اليوم كانت مليئة بالمعلومات القيمة التي لا تنتهي فنحن على موعد في لقاء اخر ومقاله جديده.. واتمنى ان اكون قد اجبتكم على كل اسئلتكم في مقاله اليوم وهي “ ما هو ال Flexbox وليه  بيتم استخدام ال FLEX BOX ” والسلام عليكم ورحمة الله وبركاته.