الفرق بين العرض والأساس المرن في Flexbox

فهم الأجزاء الغريبة

عندما بدأت في تعلم Flexbox لأول مرة ، كان الشيء الذي أدهشني الفضول أكثر هو "لماذا أضافوا هذا الأساس المرن؟" أعني ، لدي عرض ... لماذا يوجد أيضًا أساس مرن؟

"القيد الديناميكي"

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

بعد الكثير من التجارب وبعض العبث بالأزياء الجيدة ، توصلت إلى استنتاج مفاده أن الغرض الأساسي من الأساس المرن هو توفير قيد "ديناميكي". ما الذي أعنيه بذلك بالضبط ، رغم ذلك؟ قيد "ديناميكي".

أفترض أنك معتاد بالفعل أو على الأقل على دراية عامة بـ CSS و Flexbox.

لن أتعمق في أي تفاصيل حول CSS أو Flexbox والتي ستعلمك المفاهيم الأساسية لأي منهما.

بحاجة إلى معرفة

سأستخدم أيضًا SCSS ، وليس CSS الأصلي ، وطريقة "Block-Element-Modifier (BEM)". والسبب في ذلك هو أنني أعتقد أنه من الأسهل أن تكون مختصراً بهذه الطريقة. لذلك ستحتاج إلى فهم أساسيات SCSS والتداخل ، يجب أن يكون BEM وصفيًا ذاتيًا في الأمثلة.

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

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

اللحم والبطاطا

لقد قلت هذه الأشياء الآن ... الجزء التالي هو شرح وإظهار بالضبط ما أتحدث عنه هنا. كما تعلم ، عند العمل باستخدام flex-box ، يمكنك استخدام الأساس المرن بدلاً من العرض.

أمثلة بصرية

في المثال أعلاه ، لدينا عنصر "داخلي" يعيش داخل "العنصر" الخارجي. العنصر الخارجي هو Flexbox الخاص بنا والعنصر الداخلي له أساس مرن يبلغ 400 بكسل.

يمكن أن يبدو HTML لما سبق على النحو التالي:

ينتج عن ذلك مربع رمادي بعرض 400 بكسل × 250 بكسل ارتفاعًا في منتصف الشاشة كما يلي:

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

دعونا نحصل على "ديناميكي"

لذلك دعونا نغير الكود لإظهار "الطبيعة الديناميكية". للقيام بذلك ، كل ما نحتاجه هو تغيير العنصر الخارجي ليكون له ( اتجاه مرن: عمود ) وتغيير الارتفاع إلى العرض على العنصر الداخلي (لا يتغير html).

يؤدي تغيير الاتجاه المرن إلى تغيير الاتجاه الذي سيؤثر فيه الأساس المرن. لذا فإن الأساس المرن بشكل فعال هو العرض والارتفاع. في المثال أعلاه ، سينتج عن الأساس المرن الآن أن يكون طول الكتلة 400 بكسل مقابل مستطيل عريض 400 بكسل رأيناه من قبل.

إذا كنت تريد أن تلعب بهذا الرمز بنفسك ، فإليك رمزًا برمجيًا به الكود أعلاه.

الملاحظة

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

فهم أعمق / أفضل الممارسات

فيما يلي بعض أهم الأشياء التي تعلمتها حول الأساس المرن أثناء استخدامي للأساس المرن لـ Flexbox.

  • يتحكم Flex-base إما في "العرض" أو "الارتفاع" بناءً على الاتجاه المرن
  • ستتجاوز Flex-base أي عرض آخر: أو ارتفاع: خصائص إذا تم تحديد أي شيء بخلاف الأساس المرن: تلقائي (تلقائي افتراضيًا)
  • الاختصار الخاص بالأساس المرن هو (flex: $ Grow ، $ shrink ، $ size) ويتم ضبطه على (flex: 0 1 auto ) افتراضيًا.
  • عندما يتم تعيين الأساس المرن إلى تلقائي ، فإنه يتحقق أولاً من خاصية العرض أو الارتفاع (بناءً على الاتجاه) إذا لم يكن هناك أيهما ، فإنه يستخدم تحجيم محتوى العناصر
  • ستظل القواعد المرنة تتبع أي إعدادات min / max-width: أو height. مرة أخرى ، يعتمد على الاتجاه المرن:
  • يتجاوز Flex-base في العمود الارتفاع: هذا مهم لأنه على الرغم من أن العرض: سوف يخضع للتقلص المرن ، الارتفاع: لن. (قد يتسبب هذا في نتائج مربكة وغير متوقعة في التصميم الخاص بك.)

المهم أن نلاحظ

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

العامل المتباعد بين العرض والأساس المرن هو القدرة الديناميكية للأساس المرن لتغيير اتجاهه الفعال بناءً على الاتجاه المرن.

التحذير

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

خذ أيضًا ملاحظة خاصة بالنقطة رقم 4 :

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

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

أفضل الممارسات

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

اختصار الأساس المرن هو (flex: $ Grow ، $ shrink ، $ size) ويتم ضبطه على (flex: 0 1 auto ) افتراضيًا.

flex: 0 1 200px;

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

مصادر إضافية

في مثال codepen التالي ، أعرض flex-wrap لإظهار مثال مرئي للمعلومات المذكورة أعلاه من هذه المقالة.

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

استنتاج

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

إذا كنت تعتقد أن هناك أي شيء فاتني ، وجدت خطأ مطبعي ، وما إلى ذلك ... يرجى إعلامي!

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

ابقى على تواصل ؟

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

سأبذل قصارى جهدي للرد على أي تعليقات أو أسئلة هنا على ميديوم.

إذا كنت تفعل الشيء الاجتماعي: Instagram أو Facebook.

اعتمادات الصورة: (Waterfall | Jared Erondu) (Chatter | Dan Wayman) (إخلاء المسئولية | Pop & Zebra) (الهدف | Olav Ahrens Røtne) و (Let's go | Goh Rhy Yan). كل الصور من Unsplash.com