فهم كل إعداد Flexbox في Divi 5

يعد Flexbox و Divi 5 ثنائيًا قويًا يمكّن مستخدمي Divi من إنشاء تخطيطات مذهلة ومستجيبة. في هذا المنشور ، سنوفر الدليل النهائي لفهم واستخدام كل إعداد Flexbox لإنشاء تخطيطات مرنة وسريعة الاستجابة بسهولة.

يقع Flexbox في قلب منشئ Visual Builder الذي تم تجديده Divi 5 ، مما يسمح للمستخدمين ببناء تصميمات مذهلة مع تحكم لا مثيل له. يجعل نظام تخطيط Flexbox الخاص بـ Divi 5 نسيمًا معقدًا ، من محاذاة المحتوى إلى بناء شبكات ديناميكية.

دعنا نغوص.

ما هو Flexbox؟

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

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

المفاهيم الرئيسية لـ FlexBox

يعمل Flexbox حول العديد من المفاهيم الأساسية:

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

Flexbox في Divi 5: حقبة جديدة

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

الوصول إلى Flexbox في Divi 5

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

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

دعنا نسير عبر كل إعداد حتى تتمكن من فهم كيفية عملها وكيفية استخدامها لإنشاء تخطيطات.

انهيار مفصل لإعدادات Flexbox في Divi 5

فيما يلي دليل لكل إعداد مرتبط بـ Flexbox في Divi 5. يتضمن كل إعداد الغرض والخيارات المتاحة وحالات الاستخدام العملية لمساعدتك على تطبيقها بفعالية.

نمط التصميم

Flex هو الخيار الافتراضي في قائمة STYLOUT Style STOLDDOWN. عندما تقوم بتعيين حاوية على Flex ، تصبح حاوية مرنة. يمكن بعد ذلك محاذاة عناصر الأطفال المباشرة (العناصر المرنة) بمرونة باستخدام خصائص CSS Flexbox.

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

الفجوة الأفقية والعمودية

في إعدادات Divi 5 Flexbox ، تعمل عناصر التحكم في الفجوة الأفقية والعمودية كخاصية فجوة CSS. أنها توفر طريقة فعالة لإضافة تباعد ثابت بين عناصر الطفل داخل الحاوية.

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

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

اتجاه التصميم

يعد خيار اتجاه التصميم في Divi 5 (خاصية التوجيه المرن في CSS) أحد أهم عناصر التحكم الأساسية. ويحدد المحور الأساسي الذي سيتم من خلاله ترتيب عناصر الطفل داخل الحاوية.

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

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

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

يعمل Column Reverse على نفس المنوال ، وتكديس عناصر داخل حاوية رأسيًا ، ولكن في الاتجاه المعاكس.

تبرير المحتوى

يتحكم خيار محتوى Divi 5 (خاصية المحتوى المبرر في CSS) في محاذاة العناصر المرنة على طول المحور الرئيسي للحاوية المرنة.

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

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

محاذاة العناصر

تتحكم خياراتعناصر المحاذاة(خاصية محاذاة العناصر CSS) في إعدادات Flexbox من Divi 5 إلى كيفية محاذاة العناصر المرنة على طول المحور المتقاطع للحاوية المرنة. يختلف هذا الخيار عن تبرير المحتوى ، والذي يتوافق مع العناصر على طول المحور الرئيسي.

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

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

تخطيط التفاف

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

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

عناصر التحكم المرنة على مستوى الوحدة النمطية

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

مزايا Flexbox

Flexbox في Divi 5 ليس مجرد ترقية فنية. يوفر طريقة أفضل لبناء مواقع مواقع حديثة واستجابة بسهولة أكبر وكفاءة. من خلال دمج Flexbox في البناء المرئي ، يتيح Divi 5 للمستخدمين من جميع مستويات المهارة تسخير قوة CSS دون كتابة رمز. فيما يلي بعض الأسباب التي تجعل Flexbox عبارة عن ترقية مؤثرة من Divi 4:

تحكم تخطيط عدم الرمز البديهي

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

تصميم أفضل استجابة

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

Flexbox + صفوف متداخلة

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

مجموعات وحدة Flexbox +

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

تحسين الأداء والبساطة

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

قوالب Flexbox التي تم تصميمها مسبقًا لبدايات سريعة

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

سير عمل التصميم في المستقبل

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

فتح إمكانات إبداعية مع Flexbox في Divi 5

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