ما هو Flexbox (ولماذا يجب استخدامه)

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

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

ما هو Flexbox

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

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

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

قرر أن الزر الأوسط يجب أن يشغل مساحة أكبر من الآخرين:

أو قد ترغب في تكديس الأزرار تلقائيًا عندما تصبح الشاشة أضيق:

يجعل Flexbox كل هذا ممكنًا بخصائص بسيطة مثل تبرير المحتوى ، و Flex-Wrap ، و Flex-Grow.

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

قد تفكر: ألا يمكنني بالفعل القيام بذلك بهوامش وحشو؟

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

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

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

كيف يؤثر الاتجاه المرن على المحاذاة

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

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

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

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

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

بناء الجملة وخصائص Flexbox الشائعة

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

.container {
display: flex;
}

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

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

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

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

لماذا تستخدم FlexBox

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

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

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

لماذا غالبًا ما يكون Flexbox أفضل من الشبكة

الشبكة هي نظام تخطيط شائع آخر ، مثل Flexbox. ومع ذلك ، تم تصميم كلاهما لحالات الاستخدام المختلفة.

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

تبدأ بتحديد الشبكة: كم عدد الصفوف والأعمدة الموجودة ، وكم يجب أن يكون كل منهما. ثم تضع كل عنصر في هذا الهيكل.

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

ولكن ليس كل تصميم يحتاج إلى هذا المستوى من التخطيط.

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

في تصميم Flexbox ، يتم محاذاة البطاقات في اتجاه واحد (صف أو عمود) ثم لف وتباعد بناءً على قواعد الحاويات.

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

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

Flexbox في Divi 5

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

لهذا السبب يتضمن Divi 5 الآن عناصر تحكم Flexbox مدمجة. لم تعد بحاجة إلى تبديل علامات التبويب أو إضافة CSS يدويًا. كل هذا ، وحتى سلوكيات التصميم المتقدمة ، تم بناؤه الآن في البناء البصري ، ناقص الترميز والواجهة الخلفية الساحقة.

اشترك في قناتنا على YouTube

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

هذا يفتح مجموعة جديدة من عناصر التحكم في التصميم. هذه هي خصائص Flexbox الأساسية التي عادة ما تكتبها في CSS ، ولكن الآن كخيارات قابلة للنقر. يمكنك اختبار التغييرات مباشرة ومعرفة كيف يتفاعل المحتوى الخاص بك.

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

تعلم كل شيء عن نظام Divi 5's Flexbox

هياكل صف جديدة

لماذا Divi عندما يكون بناة الويب الآخرين لديهم أيضًا؟ بينما يقدم العديد من بناة الويب Flexbox كخيار تخطيط ، يقترب Divi 5 بشكل مختلف. هذه ليست ميزة طبقة أعلى نظام موجود ؛ إنه الآن جوهر كيفية عمل المنشئ.

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

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

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

يمكنك أيضًا تغيير كيفية ترتيب الأعمدة داخل صف باستخدام بنية عمود التغيير.

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

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

كيف يعمل Flexbox في Divi 5

إذا كنت قد بدأت ، فإليك تجول سريع لمساعدتك على الشعور بالثقة عند استخدام Flexbox في Divi 5.

عناصر التحكم في التصميم

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

• (1) نمط التصميم: هذا هو المكان الذي تنشط فيه المرن. بمجرد تعيينها ، تصبح خيارات أخرى محددة مثل الاتجاه والمحاذاة والتباعد مرئيًا.
• (2) الفجوة الأفقية: يضيف مساحة بين العناصر من اليسار إلى اليمين.
• (3) الفجوة الرأسية: يضبط المسافة بين العناصر المكدسة عند استخدام تخطيطات الأعمدة.
• (4) اتجاه التخطيط: يغير التدفق أو الصف أو العمود أو الاتجاهات المنعكسة ، حتى تتمكن العناصر من محاذاة جنبًا إلى جنب أو من أعلى إلى أسفل.
• (5) تبرير المحتوى: محاذاة العناصر على طول المحور الرئيسي. يمكنك تركيزهم ، أو دفعهم إلى جانب واحد ، أو نشرها.
• (6) محاذاة العناصر: محاذاة العناصر على طول المحور المتقاطع ، وهو مفيد عند ترتيب العناصر رأسياً داخل صف أفقي.
• (7) تغليف التصميم: يتيح هذا للعناصر الانتقال إلى السطر التالي عندما تنفد المساحة. مفيد أثناء بناء تخطيطات تستجيب لحجم الشاشة بدلاً من الانهيار.

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

أصبح محاذاة العناصر في صفين سهلة الآن بدون استفسارات وسائل الإعلام أو حلول يدوي.

عناصر التحكم في العمود وتغيير حجمها

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

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

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

ضوابط الطلب

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

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

حالات الاستخدام العملي لـ Flexbox

دعونا نلقي نظرة على عدد قليل من حالات استخدام Flexbox التي تم تبسيطها الآن مع Divi 5.

1. قم بتوافق أي شيء برأسيًا

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

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

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

2. تعادل ارتفاعات البطاقة تلقائيًا

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

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

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

3. التفاف الأزرار تلقائيًا عبر نقاط التوقف

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

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

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

Divi + Flexbox فقط أمر منطقي

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

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