السلام عليكم، سنرى في هذا الدرس تقنية Flexbox.
Flexbox هي تقنية جديدة CSS، تجعل العنصر المحتوي و المسمى في تقنية Flexbox بـ Flex container يضم العناصر المحتواة داخله مباشرة حيث تسمى هذه الأخيرة في تقنية Flexbox بـ Flex items، و بتغير أبعاد Flex-container تتغير أبعاد Flex-items تلقائياً مكونة نموذجاً متجاوباً، ليس هذا فقط، بل يمكن أن تغيّر محاذاتها، إتجاهها، ترتيبها، حجمها.. و بالتالي فهذه التقنية تجعل علبة العنصر Box Model الذي درسناه في درس تقنيتا Margin و Padding علبة مرنة، أي Flexible Box، و تختصَر في Flexbox، و قد سهلت هذه التقنية الكثير من الأمور على Web Designers و Web Developpers حيث بتواجدها في صفحات الويب تستبعَد العديد من الأكواد كـ 'FLOAT'، 'CLEAR'، 'POSITION'، 'MARGIN'، 'PADDING'، 'WIDTH'، 'HEIGHT'، 'OVERFLOW'، 'VERTICAL-ALIGN' و غيرها.. مما يجعل تحميل صفحات الويب أكثر سرعة، ناهيكم عن فاعلية Flexbox التي جعلت أكبر Frameworks تعتمد عليها كـ Bootstrap مثلاً.
لدى تقنية Flexbox عشر خواص Longhand و خاصيتين Shorthand منها التي تقحم في Flex-container و منها التي تقحم في Flex-item و هم :
• الخاصية FLEX-DIRECTION
• الخاصية FLEX-WRAP
• الخاصية FLEX-FLOW
• الخاصية JUSTIFY-CONTENT
• الخاصية ALIGN-ITEMS
• الخاصية ALIGN-CONTENT
• الخاصية ORDER
• الخاصية FLEX-GROW
• الخاصية FLEX-SHRINK
• الخاصية FLEX-BASIS
• الخاصية FLEX
• الخاصية ALIGN-SELF
إنشاء Flexbox
طريقة إنشاء Flexbox
تنشأ تقنية Flexbox عن طريق الخاصية 'DISPLAY' حيث تقحم في Flex container، و تحدِّد قيمتها نوع Flexbox، فإذا كانت قيمة بإسم 'FLEX' سيحدَّد Flexbox من نوع Block، أي أن Flex container سيأخذ كامل عرض العنصر المحتوي له، أما إذا كانت قيمة بإسم 'INLINE-FLEX' فسيحدَّد Flexbox من نوع Inline، أي أن Flex container سيتشارك عرض العنصر المحتوي له مع عناصر من نوع Inline.
يمكن إنشاء بنية هرمية بتقنية Flexbox، بمعنى أنه يمكن لأي Flex item أن يكون في حد ذاته Flex-container عبر الخاصية 'DISPLAY' و قيمة من قيمتيها 'FLEX' أو 'INLINE-FLEX'.
قواعد Flexbox
1 - إذا لم يكن لدى Flex item عرض أو ارتفاع مخصص في CSS، سيخصص له عرض أو ارتفاع تلقائي حسب محتواه.
2 - إذا كان عرض Flex container أصغر من مجموع عرض Flex items، سيلغي Flex container عرض كل Flex item و سيخصِّص لجميعها عرض متساوٍ يتجاوب مع عرضه، و نفس الشيء بالنسبة للإرتفاع.
الفيديو التوضيحي للدرس
الخاصية FLEX-DIRECTION
يعتمد Flex container على محورين في إنشاء تمركز للـ Flex items، و يسميان هذين المحورين بمحور التمركز الرئيسي و محور التمركز الثانوي، أحدهما يكون عمودياً و الآخر أفقياً، الخاصية 'FLEX-DIRECTION' هي المسؤولة عن تحديد أيُّ محور سيكون الرئيسي في التمركز، و تقحم في Flex container بحيث أن في التنسيق التلقائي يكون المحور الرئيسي هو المحور الأفقي و الإتجاه حسب اتجاه الكتابة، و يكون المحور الثانوي هو المحور العمودي و الإتجاه من الأعلى إلى الأسفل، لديها أربع قيم خاصة و هم :
* ROW : هي القيمة التلقائية للخاصية، و تُمركز Flex items في محور تمركزها الأفقي و مع اتجاه الكتابة (من اليمين إلى اليسار بالنسبة للغة العربية) أي أن محور التمركز الرئيسي هو المحور الأفقي و الإتجاه حسب اتجاه الكتابة، و محور التمركز الثانوي هو المحور العمودي و الإتجاه من الأعلى نحو الأسفل.
* ROW-REVERSE : تمركز هذه القيمة Flex items في محور تمركزها الأفقي و عكس اتجاه الكتابة (من اليمين إلى اليسار بالنسبة للغة العربية) أي أن محور التمركز الرئيسي هو المحور الأفقي و الإتجاه حسب اتجاه الكتابة، و محور التمركز الثانوي هو المحور العمودي و الإتجاه من الأعلى نحو الأسفل.
* COLUMN : تمركز هذه القيمة Flex items في محور تمركزها العمودي و الإتجاه من بداية Flex container إلى نهايته، أي أن محور التمركز الرئيسي هو المحور العمودي و الإتجاه من الأعلى نحو الأسفل، و محور التمركز الثانوي هو المحور الأفقي و الإتجاه حسب اتجاه الكتابة.
* COLUMN-REVERSE : تمركز هذه القيمة Flex items في محور تمركزها العمودي و الإتجاه من نهاية Flex container إلى بدايته، أي أن محور التمركز الرئيسي هو المحور العمودي و الإتجاه من الأسفل نحو الأعلى، و محور التمركز الثانوي هو المحور الأفقي و الإتجاه حسب اتجاه الكتابة.
تقبل الخاصية 'FLEX-DIRECTION' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية FLEX-WRAP
تلغي الخاصية 'FLEX-WRAP' تعامل Flex container مع Flex items حسب القاعدة الثانية لتقنية Flexbox، و ذلك بتطبيق القاعدة الأولى مع إبقاء Flex items داخل Flex container حيث تسمح بأخذ الـ Flex items المتعدية طول الـ Flex container سطر جديد في حالة كان محور تمركزها الرئيسي أفقياً، و أخذ عمود جديد في حالة كان محور تمركزها الرئيسي عمودياً، تقحم الخاصية في Flex container، و لديها ثلاث قيم خاصة و هم :
* NOWRAP : هي القيمة التلقائية للخاصية، و تسمح بتعامل Flex container مع Flex items حسب القاعدة الثانية لتقنية Flexbox.
* WRAP : تمنع هذه القيمة تعامل Flex container مع Flex items حسب القاعدة الثانية لتقنية Flexbox حيث تسمح بتمركز Flex items التي تتعدى Flex container بالرجوع إلى السطر أو العمود حسب محور تمركزها الرئيسي، و مع الإتجاه التلقائي للتمركز في محور التمركز الثانوي.
* WRAP-REVERSE : تمنع هذه القيمة تعامل Flex container مع Flex items حسب القاعدة الثانية لتقنية Flexbox حيث تسمح بتمركز Flex items التي تتعدى Flex container بالرجوع إلى السطر أو العمود حسب محور تمركزها الرئيسي، لكن عكس الإتجاه التلقائي للتمركز في محور التمركز الثانوي.
تقبل الخاصية 'FLEX-WRAP' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية FLEX-FLOW
تعتبر الخاصية 'FLEX-FLOW' هي Shorthand property للخاصيتين 'FLEX-DIRECTION' و 'FLEX-WRAP'، حيث أن قيمتها التلقائية هي القيمتين التلقائيتين للخاصيتين Longhand، علماً أن القيمة التي في اليسار هي قيمة الخاصية 'FLEX-DIRECTION' و القيمة التي في اليمين هي قيمة الخاصية 'FLEX-WRAP' مع الأخذ بعين الإعتبار فرق القيم بفراغ من نوع Space، و تقحم الخاصية في Flex-container.
تقبل الخاصية 'FLEX-FLOW' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex container تأثير الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية JUSTIFY-CONTENT
تمكِّن الخاصية 'JUSTIFY-CONTENT' من محاذاة Flex items حسب محور تمركزها الرئيسي، تقحم الخاصية في Flex container، و لديها ست قيم خاصة و هم :
* FLEX-START : هي القيمة التلقائية للخاصية، و تمكِّن من محاذاة Flex items في بداية Flex container حسب محور تمركزها الرئيسي.
* FLEX-END : تمكِّن هذه القيمة من محاذاة Flex items في نهاية Flex container حسب محور تمركزها الرئيسي.
* CENTER : تمكِّن هذه القيمة من محاذاة Flex items في وسط Flex container حسب محور تمركزها الرئيسي.
* SPACE-BETWEEN : تمركز هذه القيمة Flex items بطريقة متناسقة حيث يكون Flex item الأول في بداية Flex container، و يكون Flex item الأخير في نهاية Flex container، و تتوزع المسافة بين كل Flex item و Flex item موالي له بشكل متساوٍ.
* SPACE-AROUND : تمركز هذه القيمة Flex items بطريقة متناسقة حيث تكون المسافة بين Flex item الأول و حافة Flex container تساوي نصف المسافة بين كل Flex item و Flex item موالي له، و أيضاً تكون المسافة بين Flex item الأخير و حافة Flex container تساوي نصف المسافة بين كل Flex item و Flex item موالي له.
* SPACE-EVENLY : تمركز هذه القيمة Flex items بطريقة متناسقة حيث تكون المسافة بين Flex item الأول و حافة Flex container تساوي المسافة بين كل Flex item و Flex item موالي له، و أيضاً تكون المسافة بين Flex item الأخير و حافة Flex container تساوي المسافة بين كل Flex item و Flex item موالي له.
تقبل الخاصية 'JUSTIFY-CONTENT' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية ALIGN-ITEMS
تمكِّن الخاصية 'ALIGN-ITEMS' من محاذاة محور تمركز Flex items الرئيسي في محور تمركز Flex items الثانوي مع احترام محتوى كل Flex item بإعطاء لهذا الأخير طول محور التمركز الثانوي حسب محتواه، تقحم الخاصية في Flex container، و لديها خمس قيم خاصة و هم :
* STRETCH : هي القيمة التلقائية للخاصية، و تجعل كل Flex item يأخذ طول محور تمركزه الثانوي.
* FLEX-START : تجعل هذه القيمة محور تمركز Flex items الرئيسي يتمركز في بداية Flex container نسبة إلى محور التمركز الثانوي، مع احترام محتوى كل Flex item.
* FLEX-END : تجعل هذه القيمة محور تمركز Flex items الرئيسي يتمركز في نهاية Flex container نسبة إلى محور التمركز الثانوي، مع احترام محتوى كل Flex item.
* CENTER : تجعل هذه القيمة محور تمركز Flex items الرئيسي يتمركز في وسط Flex container نسبة إلى محور التمركز الثانوي، مع احترام محتوى كل Flex item.
* BASELINE : تجعل هذه القيمة محور تمركز Flex items الرئيسي يتمركز حسب خط الأساس الوهمي المكوَّن من المحتوى النصي للـ Flex items في محور التمركز الثانوي، مع احترام محتوى كل Flex item.
تقبل الخاصية 'ALIGN-ITEMS' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية ALIGN-CONTENT
تعمل الخاصية 'ALIGN-CONTENT' محاذاة لأسطر أو أعمدة الـ Flex items في محور التمركز الثانوي، و بما أن هذه الأخيرة هي عبارة عن أسطر أو أعمدة، فهي تحت تأثير القيمة 'WRAP' او 'WRAP-REVERSE' للخاصية 'FLEX-WRAP'، بمعنى أن الخاصية 'ALIGN-CONTENT' لن تعمل إلى بتواجد تأثير إحدى القيمتين السالفتي الذكر حيث تكوّنان أسطر الـ Flex items في حالة ما إذا كان محور التمركز الرئيسي هو المحور الأفقي أو تكوّنان أعمدة الـ Flex items في حالة ما إذا كان محور التمركز الرئيسي هو المحور العمودي، تقحم الخاصية 'ALIGN-CONTENT' في Flex container، و لديها سبع قيم خاصة و هم :
* STRETCH : هي القيمة التلقائية للخاصية، و تجعل أسطر أو أعمدة الـ Flex items تأخذ أطوال متساوية غير تاركة مسافة بينها مغطية كامل Flex container في محور التمركز الثانوي.
* FLEX-START : تعمل هذه القيمة محاذاة لأسطر أو أعمدة الـ Flex items في بداية Flex container نسبة إلى محور التمركز الثانوي.
* FLEX-END : تعمل هذه القيمة محاذاة لأسطر أو أعمدة الـ Flex items في نهاية Flex container نسبة إلى محور التمركز الثانوي.
* CENTER : تعمل هذه القيمة محاذاة لأسطر أو أعمدة الـ Flex items في وسط Flex container نسبة إلى محور التمركز الثانوي.
* SPACE-BETWEEN : تمركز هذه القيمة أسطر أو أعمدة الـ Flex items بطريقة متناسقة حيث يكون سطر أو عمود الـ Flex items الأول في بداية Flex container، و يكون سطر أو عمود الـ Flex items الأخير في نهاية Flex container، و تتوزع المسافة بين كل سطر أو عمود الـ Flex items و سطر أو عمود الـ Flex items موالي له بشكل متساوٍ.
* SPACE-AROUND : تمركز هذه القيمة أسطر أو أعمدة الـ Flex items بطريقة متناسقة حيث تكون المسافة بين سطر أو عمود الـ Flex items الأول و حافة Flex container تساوي نصف المسافة بين كل سطر أو عمود الـ Flex items و سطر أو عمود الـ Flex items موالي له، و أيضاً تكون المسافة بين سطر أو عمود الـ Flex items الأخير و حافة الـ Flex container تساوي نصف المسافة بين كل سطر أو عمود الـ Flex items و سطر أو عمود الـ Flex items موالي له.
* SPACE-EVENLY : تمركز هذه القيمة أسطر أو أعمدة الـ Flex items بطريقة متناسقة حيث تكون المسافة بين سطر أو عمود الـ Flex items الأول و حافة Flex container تساوي المسافة بين كل سطر أو عمود الـ Flex items و سطر أو عمود Flex items موالي له، و أيضاً تكون المسافة بين سطر أو عمود الـ Flex items الأخير و حافة Flex container تساوي المسافة بين كل سطر أو عمود الـ Flex items و سطر أو عمود الـ Flex items موالي له.
تقبل الخاصية 'ALIGN-CONTENT' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية ORDER
تخول الخاصية 'ORDER' ترتيب Flex items، و تقحم في Flex item المزاد إعطاؤه ترتيب ظهور عبر قيمة تكون عبارة عن عدد موجب، علماً أن العدد الصغير يرتب Flex item أولاً، و العدد الأكبر يرتب تالياً، القيمة التلقائية للخاصية هي '0'، و إذا كانت مجموعة من Flex items لديها قيمة متساوية أو ليست لديها قيمة، سيتم ترتيبها قبل Flex items المرتبة بالخاصية 'Order' و حسب ترتيب إقحامها في ملف HTML.
تقبل الخاصية 'ORDER' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex item تأثير الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية FLEX-GROW
تحدّد الخاصية 'FLEX-GROW' إمكانية تمدد Flex item في محور تمركزه الرئيسي نسبة إلى Flex items المتواجدة معه في نفس Flex container من أجل ملء الفراغ الزائد في هذا الأخير، و يقحم في قيمتها عدد موجب يحدد درجة التمدد علماً أن القيمة التلقائية للخاصية هي '0' حيث تمنع Flex item من التمدد، و Flex item الذي يحتوي على أكبر قيمة هو الذي يتمدد أكثر من الذي يحتوي على قيمة أصغر.
تقبل الخاصية 'FLEX-GROW' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex item تأثير الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية FLEX-SHRINK
تحدّد الخاصية 'FLEX-SHRINK' إمكانية تقلص Flex item في محور تمركزه الرئيسي نسبة إلى Flex items المتواجدة معه في نفس Flex container، و يقحم في قيمتها عدد موجب يحدد درجة التقلص علماً أن القيمة التلقائية للخاصية هي '1'، و Flex item الذي يحتوي على أكبر قيمة هو الذي يتقلص أكثر من الذي يحتوي على قيمة أصغر.
تقبل الخاصية 'FLEX-SHRINK' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex item تأثير الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.الخاصية FLEX-BASIS
تحدّد الخاصية 'FLEX-BASIS' الطول الأساسي للـ Flex item قبل تمديده أو تقليصه ملغية القاعدة الأولى لتقنية Flexbox، و يكون هذا الطول في محور تمركز Flex item الرئيسي، تدعم الخاصية 'FLEX-BASIS' القيم النسبية الموجبة و القيم المطلقة الموجبة، و قيمتها التلقائية هي قيمة بإسم 'AUTO' حيث تفعّل القاعدة الأولى لتقنية Flexbox.
تقبل الخاصية 'FLEX-BASIS' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex item تأثير الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.الخاصية FLEX
تعتبر الخاصية 'FLEX' هي Shorthand property للخواص 'FLEX-SHRINK'، 'FLEX-GROW' و 'FLEX-BASIS'، حيث أن قيمتها التلقائية هي القيم التلقائية للخواص Longhand، علماً أن القيمة التي في اليسار هي قيمة الخاصية 'FLEX-GROW'، و القيمة الوسطى هي قيمة الخاصية 'FLEX-SHRINK'، و القيمة التي في اليمين هي قيمة الخاصية 'FLEX-BASIS' مع الأخذ بعين الإعتبار فرق القيم بفراغ من نوع Space، و تقحم الخاصية في Flex-item علماً أن CSS تعطي أولوية تطبيق الأكواد للخاصية 'FLEX' بدلاً من خواصها Longhand.
تقبل الخاصية 'FLEX' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex item تأثير الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.الخاصية ALIGN-SELF
تعمل الخاصية 'ALIGN-SELF' نفس ما تعمله الخاصية 'ALIGN-ITEMS'، إلا أنها تطبق تأثيرها سوى على Flex item المقحمة في كوده حيث تمكِّن من محاذاته في محور تمركزه الثانوي مع احترام محتواه بإعطاءه طول في بعد محور تمركزه الثانوي حسب محتواه، لدى الخاصية 'ALIGN-SELF' نفس القيم الخمس الخاصة للخاصية 'ALIGN-ITEMS' بنفس تأثيرها، زيادة على قيمة واحدة بإسم 'AUTO' حيث تعتبر قيمتها التلقائية و هم :
* AUTO : تجعل هذه القيمة Flex item يتمركز في نقطة تقاطع محور تمركزه الرئيسي مع محور تمركزه الثانوي.
* STRETCH : تجعل هذه القيمة Flex item يأخذ طول محور تمركزه الثانوي.
* FLEX-START : تجعل هذه القيمة Flex item يتمركز في بداية Flex container نسبة إلى محور تمركزه الثانوي، مع احترام محتواه.
* FLEX-END : تجعل هذه القيمة Flex item يتمركز في نهاية Flex container نسبة إلى محور تمركزه الثانوي، مع احترام محتواه.
* CENTER : تجعل هذه القيمة Flex item يتمركز في وسط Flex container نسبة إلى محور تمركزه الثانوي، مع احترام محتواه.
* BASELINE : تجعل هذه القيمة Flex item يتمركز حسب خط الأساس الوهمي المكوَّن من المحتواه النصي في محور تمركزه الثانوي، مع احترام محتواه.
تقبل الخاصية 'ALIGN-SELF من القيم الشاملة قيمتين ألا و هما :
- INHERIT : تورث للـ Flex container تأثيرات قيم الخاصية من العناصر المحتوية.
- INITIAL : ترجع الخاصية إلى قيمتها التلقائية.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس