ما هو Flex box؟
CSS Flexible Box Layout، والمعروف عمومًا باسم Flexbox، يعتبر إحدى مزايا CSS3
عبارة عن طريقة تخطيط أحادية البعد لتخطيط العناصر في صفوف أو أعمدة. تلتف العناصر لملء
مساحة إضافية وتقليصها لتناسب المساحات الأصغر. تشرح هذه المقالة جميع الأساسيات.
لماذا Flexbox؟
لفترة طويلة، كانت الأدوات الوحيدة الموثوقة والمتوافقة مع المتصفح المتاحة لإنشاء تخطيطات CSS هي أشياء مثل floating و positioning، هذه الأشياء جيدة وتعمل ، لكنها في بعض النواحي مقيدة ومحبطة إلى حد ما.
على سبيل المثال متطلبات التصميم البسيطة التالية إما صعبة أو مستحيلة التحقيق باستخدام هذه الأدوات ، بأي نوع من الطرق المريحة والمرنة:
- توسيط عنصر أو مجموعة من العناصر عموديًا داخل الحاوي.
- جعل جميع العناصر في الحاوية يأخذون كمية متساوية من العرض / الارتفاع المتاح ، بغض النظر عن مقدار العرض / الارتفاع المتاح.
- جعل جميع الأعمدة في مخطط متعدد الأعمدة تتبنى نفس الارتفاع حتى لو كانت تحتوي على كمية مختلفة من المحتوى.
كما سترى الآن، فإن flexbox يجعل الكثير من مهام التخطيط أسهل بكثير.
دعونا نبدأ!
مثال عملي:
أولًا ، نحتاج إلى تحديد العنصر الذي سيتم إعطاؤه خاصية flexBox
للقيام بذلك ، قمنا بتعيين قيمة display خاصة للعنصر الأب (أو الحاوي) للعناصر التي تريد استهدافها.
لاحظ أن إعطاءك هذه الخاصية للعناصر الموجودة داخل الحاوي لن يعطيك النتيجة المطلوبة، فانتبه أن تعطي الخاصية للعنصر الحاوي المباشر للعناصر.
على سبيل المثال لو أردنا ترتيب ال articles داخل الsection
section
{
display: flex;
}
هذا يؤدي إلى أن يصبح عنصر <section> حاوية مرنة flexbox container، ويصبح أطفالها عناصر مرنة flexbox elements.
لكي تقوم بتجريب المثال السابق، يمكنك نسخ ملف html من هنا https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html
والذي يبدو كالتالي:
https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html
لكي يبدو بهذا الشكل:
flex model:
عندما يتم وضع العناصر كعناصر مرنة ، يتم وضعها على محورين:
المحور الرئيسي main axis: هو المحور الذي يعمل في الاتجاه الذي يتم وضع العناصر المرنة فيه (مثل الصفوف عبر الصفحة ، أو الأعمدة أسفل الصفحة.)
المحور المتقاطع cross axis: هو المحور الذي يعمل بشكل عمودي على الاتجاه الذي يتم وضع العناصر المرنة فيه.
صفوف أم أعمدة؟
يوفر Flexbox خاصية تسمى flex-direction التي تحدد الاتجاه الذي يسير فيه المحور الرئيسي (أي اتجاه يتم وضع الأطفال المرنين flexbox elements فيه)
– افتراضيًا يتم تعيين هذا ك row أي صف ، مما يؤدي إلى وضعهم في صف في اتجاه اللغة الافتراضية لمتصفحك (من اليسار إلى اليمين ، في حالة متصفح إنجليزي).
حاول إضافة التعريف التالي إلى <section>:
flex-direction: column;
ستلاحظ أن هذا يعيد العناصر إلى تخطيط العمود column layout، مثلما كانت قبل إضافة أي CSS.
ملاحظة: يمكنك أيضًا وضع العناصر المرنة في اتجاه عكسي باستخدام row-reverse , column-reverse. جرب هذه القيم أيضًا!
الالتفاف:
إحدى المشكلات التي تنشأ عندما يكون لديك مقدار ثابت من العرض أو الارتفاع في التخطيط الخاص بك هو أن أطفال Flexbox سوف يتجاوزون حاوياتهم في نهاية المطاف ، مما يؤدي إلى كسر التخطيط
إحدى الطرق التي يمكنك من خلالها إصلاح هذا هي إضافة التالي لعنصر section:
flex-wrap: wrap;
أيضًا:
flex: 200px;
لاحظ الآن أن المنظر تحسّن بشكل كبير
الآن لدينا عدة صفوف، لأن أية عناصر لا تتسع للعرض المحدد ستنزل للأسفل في صف جديد
flex: 200pxتعني أن كل عنصر من عناصر flexboxستأخذ عرض 200بيكسيل،
المحاذاة الأفقية والرأسية:
يمكنك محاذاة العناصر بالنسبة للمحور الرئيسي، لنجرب ذلك:
انسخ المثال التالي:
https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html
يمكنك أن ترى كيف يبدو الآن من هنا:
https://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html
حاليًا سترى مجموعة من الأزرار مرصوصة بجانب بعضها أعلى يسار اللائحة،
أضف التالي في الملف الذي نسخته ضمن جزئية التنسيق:
div {
display: flex;
align-items: center;
justify-content: space-around;
}
أعد تحديث الصفحة، ستلاحظ أن العناصر تم توسيطها بشكل جميل،
لشرح ما حدث، سنقوم بشرح الخصائص التي استخدمناها:
align-itemsيتحكم في مكان العناصر المرنة على المحور المتقاطع.
يمكنك أيضًا الحصول على قيم مثل flex-start و flex-end ، والتي ستقوم بمحاذاة جميع العناصر في بداية ونهاية المحور المتقاطع cross axis على التوالي.
- يوجد خاصية أخرى تمكنك من استهداف العنصر المرن بشكل خاص وهي
align-self
button:first-child {
align-self: flex-end;
}
- justify-content تتحكم في العناصر بالنسبة للمحور الرئيسي main axis
- القيمة الافتراضية هي flex-start ، مما يجعل جميع العناصر موجودة في بداية المحور الرئيسي.
- يمكنك استخدام flex-end لجعل العناصر تُعرض في نهاية المحور الرئيسي.
- Center ستقوم بتوسيط العناصر بالنسبة للمحور الرئيسي
- Space-around يقوم بتوزيع جميع العناصر بالتساوي على طول المحور الرئيسي ، مع ترك مساحة صغيرة عند كلا الطرفين.
- Space-between: شبيهة جدًا ب Space-around مع عدم إضافة مسافة عند الأطراف
حاول أن تقوم بتجريب هذه الخصائص واللعب بها قليلًا لفهمها أكثر.
مربعات مرنة متداخلة
من الممكن إنشاء بعض التخطيطات المعقدة جدًا باستخدام flexbox.
مثلًا يمكنك تعيين عنصر مرن flexbox element ليكون أيضًا حاوية مرنةflexbox container ، بحيث يتم وضع أطفاله أيضًا مثل الصناديق المرنة.
ألقي نظرة هنا:
https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html
سترى المثال من هنا:
http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html
حاول أن تقوم بتجريب هذا المثال، ويمكنك ترك أسئلتك أو إجاباتك أسفل في التعليقات.
مترجم بتصرف من MDN – Flexbox
