دليل المبتدئين لخصائص Flexbox CSS

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

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

ما هو CSS Flexbox؟

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

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

يضع Flexbox عناصر في خط مستقيم ، إما صفوف من اليسار إلى اليمين أو من أعلى إلى أسفل. اخترت الاتجاه.

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

الطريقة التقليدية تجعل خيارات التباعد العشوائي: 10 بكسل هنا ، 20 بكسل هناك ، 40 بكسل في مكان آخر. تسبب هذه القيم المنتشرة تناقضات وتجعل من الصعب معرفة أي تباعد ينطبق. خصائص الفجوة تزيل التخمين باستخدام قاعدة واحدة متسقة لجميع العناصر.

دليل سريع لـ Flexbox وخصائصه

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

العرض: Flex

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

الاتجاه المرن

اختر أي اتجاه عناصر الاتجاه. استخدم صفًا للترتيب من اليسار إلى اليمين.

وعمود لتكديس العناصر رأسياً.

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

يضع هذا الاختيار محورك المركزي ، والذي يؤثر على كيفية عمل الخصائص الأخرى.

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

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

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

محاذاة

إنه يتعامل مع المحاذاة على المحور المتقاطع. للتخطيطات الأفقية ، وهذا يعني المحاذاة الرأسية. للتخطيطات الرأسية ، يتحكم في تحديد المواقع الأفقية. وهو يدعم قيمًا مثل Flex-Start و Center و Flex-End و Stretch و Baseline (وليس القيم الفضائية*). قم بتعيينها إلى الوسط ، والعناصر تتوافق مع الوسط بغض النظر عن ارتفاعاتها. القيمة الافتراضية تمتد: العناصر التي تمتد لملء الحاوية المتقاطعة. إذا كانت الحاوية المتقاطعة للحاوية تلقائيًا ، فغالبًا ما تساوي أطول عنصر بحيث تظهر العناصر متساوية في الارتفاع.

مرن

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

فجوة

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

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

Divi 5 يجعل Flexbox Visual

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

قبل الغوص أعمق ، دعونا ننظر بإيجاز إلى ماهية Divi.

ما هو ديفي؟

Divi هو منشئ موقع الويب الذي يجعل WordPress يعمل للأشخاص الذين يريدون مواقع جيدة المظهر دون المتاعب.

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

يتضمن الموضوع 2000+ تخطيط للمطاعم والمصورين والمستشارين والشركات الأخرى ، حتى تتمكن من العثور على واحدة تحبها وتعديلها حتى تعمل بشكل مثالي لاحتياجاتك.

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

يساعدك Divi AI على البناء بسرعة

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

أخبره أنك بحاجة إلى نص ، ويكتبه.

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

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

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

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

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

Divi 5: The Future-Probling Website Builder

Divi 5 يعيد بناء الإطار بأكمله من الألف إلى الياء.

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

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

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

ما الجديد في Divi 5

العمارة الجديدة تفتح أبوابها للميزات التي لم تكن ممكنة من قبل. تغير هذه الإضافات البالغ عددها 18+ كيفية بناء وإدارة مواقع الويب.

إليك مثال على ما تحصل عليه:

• نظام تخطيط Flexbox: عناصر تحكم مرئية للمحاذاة والتباعد والمواقع. يمكن أن تنمو العناصر أو تقلصها أو التفاف إلى خطوط جديدة تلقائيًا. يعمل مع الصفوف المتداخلة ومجموعات الوحدة النمطية للتخطيطات المعقدة بدون رمز.
• الصفوف المتداخلة: ضع صفوفًا داخل صفوف أخرى مع التعشيش اللانهائي. بناء هياكل تخطيط معقدة دون حلول رمز.
• 17 وحدات WooCommerce: بناة صفحات المنتجات الكاملة بما في ذلك معرض المنتج ، إضافة إلى العربة ، والمراجعات ، والتصنيفات ، وإشعارات الأسهم ، وتفتيت الخبز ، وميثى المنتج ، والضغط ، وأكثر من ذلك. العربة والوحدات النمطية القادمة قريبا.
• نظام التفاعل: إنشاء المنبثقة ، والتبديل ، والرسوم المتحركة للتمرير ، وتأثيرات حركة الماوس ، ومشغلات المنفذ. امزج العديد من المشغلات للسلوكيات المعقدة مثل لافتات ترويجية تتلاشى بعد التمرير.
• المحرر المستجيب: يتيح لك عرض وتحرير وإعادة ضبط الحالات المستجيبة والحالات اللاصقة لأي إعداد في وقت واحد دون تبديل أوضاع العرض للتحرير بشكل أسرع وأكثر دقة وأقل تشوشًا.
• Loop Builder: قم ببناء محتوى ديناميكي يسحب من قاعدة البيانات الخاصة بك. قم بإنشاء تخطيطات مخصصة ، وشبكات المنتج ، وأقسام تكرار. يعمل مع منتجات WooCommerce.
• المسبقة مجموعة الخيارات: قم بإنشاء أنماط قابلة لإعادة الاستخدام للطباعة والحدود والظلال والخلفيات. ضعها عبر أي عنصر متوافق ، وليس فقط وحدات واحدة.
• متغيرات التصميم: اضبط القيم العالمية للألوان والخطوط والتباعد والأرقام والصور والنص. قم بتغيير لونك الأساسي مرة واحدة ، وسيتم تحديثه في كل مكان تلقائيًا.
• وحدات CSS المتقدمة: استخدام وظائف المشبك () ، calc () ، min () ، و max () من خلال عناصر التحكم البصرية. لا يوجد رمز مطلوب لحسابات الطباعة المستجيبة وحسابات التباعد.
• الألوان النسبية و HSL: إنشاء أنظمة ألوان جميلة من الناحية الرياضية. بناء اختلافات الألوان التي تحافظ تلقائيًا على الانسجام عند تغيير اللون الأساسي.

وأكثر قادمة! يواصل فريق التطوير لدينا إضافة ميزات ~ كل أسبوعين أثناء استعدادهم لإصدار الإصدار التجريبي العام.

نظرة عامة سريعة على إعداد Divi 5's Flexbox

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

1. إعداد صف المرن الأول

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

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

2. فهم الاتجاه ، التدفق ، المحاذاة

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

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

كلا الخيارين يأتي مع إصدارات عكسية تقلب الترتيب تماما.

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

بالنسبة للأعمدة ، تعني البدء أعلى ، وتركز كل شيء ، ويدفع END العناصر إلى الأسفل.

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

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

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

إذا اخترت تخطيط العمود ، فإنه يتعامل مع المحاذاة الأفقية.

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

هذه الضوابط تحل صداع التصميم الشائع دون حسابات CSS مخصصة.

3. تباعد الأشياء بعناصر تحكم الفجوة

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

اضبط الفجوة الأفقية على 20 بكسل ، وسيكون لكل عمود هذا التباعد الدقيق.

قم بتغيير الفجوة الرأسية إلى 20 بكسل ، وستقوم جميع الثغرات بالتحديث على الفور.

يدعم Divi 5 وحدات CSS المتقدمة مثل أطوال وبرنامج Viewport. يمكنك استخدام Clamp () للحصول على فجوات مستجيبة تتوسع بين أحجام الشاشة. يتم دعم وظيفة CALC () ، التي تجمع بين وحدات مثل CALC (2REM + 10PX).

عناصر التحكم في الفجوة هنا تدعم أيضًا متغيرات التصميم. أضف متغيرًا رقمًا يسمى "فجوة العمود الأفقي" مع المشبك (16px ، 2vw ، 32px) كقيمة. تطبيق هذا المتغير على عناصر التحكم في الفجوة عبر موقعك.

عندما تريد تباعد أكثر تشددًا لاحقًا ، قم بتحرير المتغير ؛ كل فجوة سوف تحديث على الفور.

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

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

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

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

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

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

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

المسافة بين الخطوط المنتشرة بصرف النظر عن الفجوات المتساوية ، يمنح المساحة حول كل خط غرفة التنفس متساوية على كلا الجانبين ، وتخلق المساحة ثغرات متطابقة بشكل متساوٍ بين جميع الخطوط.

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

5. العمل عبر أحجام شاشة مختلفة

تمنحك نقاط التوقف السبعة لـ Divi 5 تحكمًا محببًا في كيفية تكييف تخطيطاتك.

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

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

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

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

6. إنشاء إعدادات مجموعة الخيارات

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

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

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

ابدأ مع Divi 5's Flexbox اليوم

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

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

احفظ مجموعات ناجحة كإعداد مسبقات وإعادة استخدامها في أي مكان. تقضي وقتًا في التصميم بدلاً من تصحيح بناء الجملة CSS.