5 عيوب لتجنبها عند التبديل إلى نظام تخطيط Flexbox من Divi 5

Divi 5 فقط شحن نظام التخطيط المستند إلى Flexbox الجديد. إنه يحل محل محرك Divi 4 Old Block Layout ويقوم بإلغاء تأمين عناصر تحكم جديدة مباشرة في البناء المرئي. كل صف جديد الآن افتراضي للتخطيط المرن. ما لم تكن قد استخدمت بالفعل CSS Flexbox ، يتطلب هذا التغيير عقلية تصميم جديدة لأن Flex يعمل بشكل مختلف. إذا لم تقم بضبط عاداتك ، فسوف تتعثر.

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

ينتقل هذا المنشور إلى أكبر خمسة عيوب ستضربها عند تبديل نموذجك العقلي من كتلة إلى Flex in Divi 5.

المزالد رقم 1: فرض المرونة في عقلية الكتلة

→ Flex يتطلب نموذجًا عقليًا جديدًا ، وليس فقط عناصر تحكم جديدة.

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

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

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

كتلة تخطيط المكدس وحدات عموديا على طول محور الكتلة. يتيح لك Flexbox الاختيار بين الصف والعمود كمحور رئيسي.

يتوافق كل إعداد وخيار في واجهة المستخدم مباشرة مع خصائص CSS الفعلية المضافة إلى كل حاوية.

المزال رقم 2: عدم معرفة كيف تتقلص المرن وتنمو مع تحجيم عناصر الطفل

→ بدون تقلص وتنمو ، لن تتصرف تخطيطاتك كما هو متوقع.

مع Flex in Divi 5 ، يمكن أن يكون لعرض أو ارتفاع محدد. بالإضافة إلى ذلك ، يمكنهم تقليص أو ملء (عرضهم أو ارتفاعهم) اعتمادًا على الغرفة داخل الحاوية. في هذا المثال ، يتم ضبط وحدات النص على عرض 45 ٪ ، مما يعني أن وحدتين ستناسب أفقيا كما لو كان في نفس الصف. ولكن إذا أضفنا عددًا فرديًا من وحدات النص ، فإننا لا نريد أن تكون هناك مساحة فارغة. يمكننا ضبط هذه الوحدات على النمو المرن ، ثم عندما تكون هناك مساحة متوفرة على التوالي ، ستنمو هذه الوحدات لتملأ.

يعرض Divi عناصر تحكم مثل "تنمو للملء" ، و "تقلص إلى الملاءمة" ، والإعدادات المخصصة على عناصر الأطفال في أي حاوية فنية (عنصر الطفل> التصميم> تنمو لملء أو تقلص إلى الملاءمة أو العرف ).

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

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

دعونا نلقي نظرة على مثال آخر تم تصميمه باستخدام FlexBox.

تم تعيين حاوية العمود (الأصل) على الثني مع هذه الإعدادات:

• الفجوة الأفقية والعمودية : 30 بكسل (يمكن أن يستخدم هذا calc أو المشبك ليكون أفضل قليلاً ، حتى)
• اتجاه التصميم : صف عكس (شرح لهذا القرار في المزال رقم 4)
• تبرير المحتوى : المركز
• محاذاة العناصر : المركز
• التفاف المرن : التفاف عكسي (شرح لهذا القرار في المزال رقم 4)

ثم وضعت ثلاثة عناصر طفل داخل العمود. وحدة العنوان ، وحدة مقسم ، ووحدة نصية. فيما يلي الإعدادات ذات الصلة لكل:

• وحدة العنوان
  • حجم النص : المشبك (2rem ، 1.5rem + 2vw ، 3rem)
  • العرض : السيارات
  • الحجم المرن : تقلص لتناسب
• وحدة المقسم
  • العرض : السيارات
  • الحجم المرن : يتقلص ليناسب وينمو لملء
• وحدة النص
  • حجم النص : المشبك (0.9375REM ، 0.75REM + 0.4VW ، 1REM)
  • العرض : السيارات
  • الحجم المرن : تقلص لتناسب

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

مأزق رقم 3: عدم كسر عادة الهامش

→ استخدم GAP بدلاً من ذلك - إنه أكثر ذكاءً ، أنظف ، وصنعه Flex.

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

يقدم نظام Divi 5 Flexbox عناصر التحكم في الصف والفجوة العمودية تحت التصميم> التخطيط > الفجوة الأفقية والرأسية . هذه الخريطة إلى CSS GAP و GAP ROW. تنطبق الفجوات الرأسية تلقائيًا على كل "صف Flex" عندما تلتف العناصر على خط جديد. وينطبق الشيء نفسه على الفجوات الأفقية: كلما كانت هناك عناصر طفل بجانب بعضها البعض ، ستكون الفجوة موجودة. تقبل إعدادات الفجوة هذه أيضًا أي وحدة CSS موجبة ، بحيث يمكنك استخدام المشبك () أو CALC () لإنشاء مباريات فجوة سريعة الاستجابة.

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

المأزق رقم 4: ضوابط تدفق وترتيب عكسي أقل

→ لا يجب أن يتطابق الطلب البصري والترتيب الدلالي.

بشكل افتراضي ، سيتم عرض عناصر الأطفال في حاوية فليكس بترتيب المصدر. يمنحك Flexbox و Divi 5 القدرة على تحديد اتجاهات المرونة العكسية وطلب عناصر التحكم لتغيير التدفق البصري للعناصر دون تغيير ترتيب HTML للعناصر.

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

باستخدام الصف العكسي حيث يحتفظ الاتجاه المرن واللف العكسي بترتيب HTML (مهم لإمكانية الوصول) مع السماح لي أيضًا بتصميم الأشياء التي نتصورها.

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

مأزق رقم 5: نسيان وضع الالتفاف

→ لن ينكسر Flex إلى صفوف جديدة إلا إذا أخبرتها بذلك.

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

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

خذ وقتك لإتقان Flexbox

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

بسبب تلك الاختلافات ، نوصيك بشدة بقضاء ساعة في استخدام أداة تعليمية تفاعلية لفهم FlexBox. واحد سهل الاستخدام ويقوم حقًا بالخدعة هو flexboxfroggy.com. يأخذك من خلال 24 تحديات معقدة تدريجيا ، ويعلمك كل الأساسيات. إنه أفضل بكثير من التخلص من التسجيل لمدة ساعة.

استخدم Flex مع Divi 5 اليوم

Flexbox في Divi 5 صادقة. لا تخمن ما تريد. يطلب منك أن تقرر. ولكن بمجرد أن تقرر ، تتبع المرونة. يمكنك بناء كل بنية تخطيط بمسؤولية ومراقبة وموثوقة - حتى متداخلة بلا حدود - دون CSS أو المخترقات المخصصة.