أمثلة Flexbox

أواصل نشر مقالات بقلم Rachel Andrew حول ميزات تقنية Flexbox CSS

المقالات السابقة في السلسلة:

1. ماذا يحدث عند إنشاء حاوية Flexbox .
2. كل ما تحتاج إلى معرفته عن المحاذاة في Flexbox .
3. Flexbox: ما حجم هذا الصندوق المرن؟ .

نحن في نهاية سلسلة Flexbox الخاصة بي هنا في مجلة Smashing . في هذا المنشور ، سأقضي بعض الوقت في التفكير في الخيارات المتاحة لاستخدام Flexbox حقًا ، نظرًا لأن لدينا الآن CSS Grid Layout ، سأقدم بعض الاقتراحات حول ما يمكنك استخدامه متى وكيف.

في وقت سابق من هذه السلسلة

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

هل يجب علي استخدام Grid أو Flexbox؟

لا يزال هذا هو السؤال الرئيسي الذي يُسألني عند التدريب على التخطيط ، وبشكل عام أعتقد أنه مع اعتياد الناس أكثر فأكثر على العمل مع الأساليب الجديدة ، يصبح هذا سؤالًا تحتاج إلى طرحه على نفسك بشكل أقل. مع نمو التجربة ، ستفهم طريقة التخطيط التي ستستخدمها.

ومع ذلك ، إذا كنت قد بدأت للتو في فهم هذه الفكرة ، فتذكر أن CSS Grid Layout و Flexbox كلاهما CSS. إذا حددت display: grid أو display: flex ، display: flex ما تستخدم أكثر من الاختلافات. يستخدم كل من Grid و Flexbox خصائص تشكل جزءًا من مواصفات Box Alignment ؛ كلاهما مبني على مفاهيم مفصلة في مواصفات CSS الجوهرية والخارجية. .

إن السؤال عما إذا كان التصميم الخاص بك يجب أن يستخدم Grid أو Flexbox هو مثل السؤال عما إذا كان التصميم الخاص بك يجب أن يستخدم حجم الخط أو اللون. ربما يجب عليك استخدام كليهما إذا لزم الأمر. ولن يطاردك أحد إذا استخدمت الخطأ.

لذلك ، لا نختار بين Vue.js و React أو Bootstrap أو Foundation . نحن نستخدم CSS لإكمال التخطيط ، ونحتاج إلى استخدام جزيئات CSS الأكثر منطقية للجزء المحدد من تصميمنا الذي نعمل عليه. راجع كل مكون وحدد ما هو الأفضل له ، أو أي مجموعة من العناصر هي الأفضل له.

يمكن أن يكون شبكة ، أو يمكن أن يكون Flexbox . يمكن أن تكون هذه حاوية شبكة خارجية حيث تصبح بعض عناصر الشبكة مرنة أو قابلة للعكس. لا توجد مشكلة في تداخل العنصر المرن إذا لزم الأمر لمشروعك.

ما هو Flexbox حقًا؟

تصف مواصفات Flexbox طريقة التخطيط كما يلي:

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

أعتقد أن العبارة الرئيسية هنا هي "تخصيص المساحة ومحاذاة المحتوى". فليكس بوكس يدور حول أخذ مجموعة من العناصر (التي لها أحجام مختلفة) ووضعها في حاوية (والتي يمكن أن تكون ذات حجم متغير). Flexbox لينة. يحاول إنشاء أفضل تصميم لعناصرنا ، مما يمنح عناصر أكبر مساحة أكبر وعناصر أصغر مساحة أقل ، وبالتالي الحفاظ على سهولة قراءة المحتوى.

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

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

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

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

في المثال المرن ، تفصل العناصر الناتجة المسافة المتبقية بينها ، لذلك لا نستخدم المحاذاة الأفقية والرأسية.

إذا كان لدينا أساس مرن تم تعيينه على تلقائي ، وتم زيادة أي عنصر مرن ، فسيتم تزويد الباقي أيضًا بمساحة إضافية بحيث يمكن أن تكون المحاذاة مختلفة من خط إلى آخر.

هذا مثال حي على المكان الذي نود فيه استخدام Flexbox عبر تخطيط الشبكة . إذا أردنا أن يتم لف العناصر ، ولكننا نحتل المساحة التي يحتاجونها ، خطًا تلو الآخر. هذا يختلف كثيرا عن الشبكة. يمكن أن تكون مثل هذه القوالب عبارة عن مجموعة من العلامات (كلمة أو كلمتين تريد عرضها جيدًا بالإضافة إلى مجموعة من العناصر) التي تشغل المساحة التي تحتاجها ، بدلاً من إدراجها بقوة في شبكة صارمة.

يُعد Flexbox حاليًا أيضًا أفضل طريقة لتوسيط عنصر رأسيًا وأفقيًا داخل حاوية.

في المستقبل (إذا كانت المستعرضات تدعم خصائص Box Alignment خارج التخطيط المرن) ، يمكننا القيام بذلك دون إضافة شاشة عرض: المرن إلى الحاوية. في الوقت الحالي ، كل ما عليك فعله هو خط CSS إضافي ، وهو ما لا يمثل مشكلة.

يعمل Flexbox بشكل جيد للغاية مع المكونات الصغيرة أحادية البعد. يمكن ترتيب مجموعات حقول النموذج أو الرموز أو المعلومات الأخرى بسهولة والسماح بمرونة دون الحاجة إلى تحديد حجم كل عنصر بعناية.

يمكنك أيضًا تحديد Flexbox في سيناريو حيث يجب إحضار المحتوى إلى أسفل الحاوية ، مما يمنع ظهوره. في المثال أدناه ، أجعل الحاوية حاوية مرنة ، تعرض المحتويات كعمود ، ثم دع الوسط ينمو ، مع دفع التذييل لأسفل المكون.

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

ومع ذلك ، أعتقد أن Flexbox سيكون الأفضل في حالة تحتاج فيها إلى إضافة عناصر إضافية لم أتوقعها في تصميمي. على سبيل المثال ، إذا كان لدي مكون ملاحة يستخدم الشبكة ، فسأقوم بإنشاء مسارات كافية لجميع العناصر ، لأنني لا أريد إنشاء خط جديد إذا كان لدي عناصر "كثيرة جدًا". مع فليكس بوكس طويل بما فيه الكفاية ، سأسمح للعناصر أن تكون مرنة مع أساس مرن 0 (أو تلقائي ) ، ثم العناصر نفسها ستسمح للرفيق الجديد بالدخول إلى الخط ، مما يوفر مساحة لذلك.

متى يجب ألا تستخدم Flexbox؟

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

يحتوي مثال الشبكة على تخطيط ثنائي الأبعاد. التخطيط حسب الصف والعمود في نفس الوقت.

مثال Flexbox هو تخطيط أحادي البعد. لقد قمنا بتعبئة الخطوط المرنة ، ولكن التنسيب في الفضاء يحدث خطًا تلو الآخر. يعمل كل خط بشكل أساسي كحاوية مرنة جديدة في الاتجاه المرن.

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

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

على سبيل المثال ، يمكننا أن نجعل تخطيطنا المرن يبدو أشبه بالشبكة ، مما يحد من مرونة عناصرنا. تعيين النمو المرن إلى 0 وحساب حجم العناصر بالنسبة المئوية ، على غرار كيفية تحديد حجم العناصر في "شبكة" عائمة. إذا وجدت نفسك تفعل ذلك ، أقترح أن تخطيط الشبكة هو أفضل نهج ، لأنه مصمم لهذا النوع من التخطيط.

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

وهكذا ، تجعد!

آمل أن تكون سلسلة Flexbox مفيدة وقد أظهرت كيف أن فهم بعض خوارزميات المحاذاة والمعايرة للعناصر المرنة يجعل الحياة أسهل معهم.

إذا كان لديك أي أسئلة لم يتم حلها أو كان لديك قالب لا يبدو أن لديه إجابة واضحة فيما يتعلق بطريقة التخطيط المستخدمة ، فاترك تعليقًا.