كيفية الجمع بين شبكات Flexbox و CSS لتخطيطات فعالة

ملاحظة المحرر: تمت كتابة منشور الضيف هذا بواسطة Abbey Fitzgerald ، وهو مهندس برمجيات UX ومصمم ويب يحب فن صياغة الكود.

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

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

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

اختبار تخطيطات الشبكة الأساسية لـ Flexbox و CSS

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

وتذكر أنه لا يجب عليك إجراء تغييرات على موقعك المباشر. حاول تجربة Local بدلاً من ذلك ، وهو تطبيق تطوير WordPress محلي مجاني. حمله اليوم!

كيفية إنشاء تخطيط باستخدام Flexbox

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

في هذا البرنامج التعليمي ، إليك ما سنبنيه:

شاهد هذا على Codepen.

بالنسبة لهذا التصميم الأساسي ، تتضمن مهام Flexbox الرئيسية ما يلي:

• إنشاء رأس وتذييل كامل العرض
• ضع الشريط الجانبي بجوار منطقة المحتوى الرئيسية
• الحجم الصحيح للشريط الجانبي ومنطقة المحتوى الرئيسية
• تحديد مواقع عناصر التنقل

بنية HTML الأساسية

 <div class = "container">
        
    <رأس>
        <ناف>
          <ul>
            <li> </li>
            <li> </li>
            <li> </li>
          </ul>
        </nav>
        <button> </button>
    </header>
    <div class = "wrapper">
        <aside class = "sidebar">
            <h3> </h3>
        </aside>
        <section class = "main">
            <h2> </h2>
            <p> </p>
        </section>
    </div> <! - / مجمّع ->
    <footer>
        <h3> </h3>
        <p> </p>
    </footer>
</div> <! - / الحاوية ->

كيفية استخدام العرض المرن

تصميم الرأس

بدءًا من الخارج والعمل في الداخل ، مضيفًا display: flex; إلى الحاوية هي الخطوة الأولى في أي تخطيط Flexbox. يتم ضبط الاتجاه المرن على عمود ، لذلك سيؤدي هذا إلى وضع جميع الأقسام تحت بعضها البعض.

 .حاوية {
    العرض: فليكس ؛
    الاتجاه المرن: العمود.
}

كان إنشاء رأس كامل العرض تلقائيًا مع display: flex; (الرؤوس هي عنصر على مستوى الكتلة بشكل افتراضي). بسبب هذا الإعلان ، سيسمح بوضع عناصر التنقل بسهولة.

يوجد شعار وعناصر قائمة في التنقل على اليسار مع زر تسجيل الدخول على اليمين. يوجد التنقل في الرأس ، لذلك من خلال وجود justify-content: space-between; سيتم تباعد التنقل والزر تلقائيًا.

أحد الأشياء المفيدة هو مدى سهولة محاذاة النص. في التنقل ، مع align-items: baseline; ، تتم محاذاة جميع عناصر التنقل مع الخط الأساسي للنص بحيث تبدو أكثر تناسقًا.

 رأس {
    الحشو: 15 بكسل ؛
    الهامش السفلي: 40 بكسل ؛
    العرض: فليكس ؛
    تبرير المحتوى: مسافة بين ؛
}
رأس التنقل ul {
    العرض: فليكس ؛
    محاذاة العناصر: خط الأساس.
    نوع نمط القائمة: لا شيء ؛
}

تصميم محتوى الصفحة

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

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

 .غلاف {
    العرض: فليكس ؛
    الاتجاه المرن: صف.
} 

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

 .رئيسي {
    المرن: 3 ؛
    الهامش الأيمن: 60 بكسل ؛
}
.sidebar {
   المرن: 1 ؛
}

بالنسبة لمقتطف الشفرة هذا ، استخدمت الاختزال. القيم المرنة خاصة بخاصية النمو المرن. يعتبر Flex-Grow قويًا لأن هذا هو مقدار نمو العنصر (العناصر) بالنسبة لبقية العناصر المرنة داخل نفس الحاوية.

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

كيفية إنشاء تخطيط باستخدام تخطيطات شبكة CSS

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

شاهد هذا على Codepen.

مناطق قالب الشبكة

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

• رأس
• المحتوى الرئيسي
• الشريط الجانبي
• تذييل

بنية HTML الأساسية

 <div class = "container">
        
    <رأس>
        <ناف>
          <ul>
            <li> </li>
            <li> </li>
            <li> </li>
          </ul>
        </nav>
        <button> </button>
    </header>
  
    <aside class = "sidebar">
        <h3> </h3>
        <ul>
            <li> </li>
        	<li> </li>
	<li> </li>
	<li> </li>
	<li> </li>
          </ul>
    </aside>
    <section class = "main">
        <h2> </h2>
        <p> </p>
         <p> </p>
  </section>
    <footer>
        <h3> </h3>
        <p> </p>
    </footer>
</div>

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

 مناطق قالب الشبكة:
        "رأس"
        "الشريط الجانبي الرئيسي"
        "تذييل التذييل" ؛

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

شيء واحد يجب ملاحظته: يجب أن تكون هذه الأسماء "مرتبطة" بالتصميم. فقط لأنه تم الإعلان عن مناطق قالب الشبكة ، فإننا لا نعرف أين ينتمي الرأس بالفعل. في كتلة الرأس ، grid-area: header; يحتاج إلى أن يضاف.

 رأس {
    منطقة الشبكة: رأس ؛
    الحشو: 20 بكسل 0 ؛
    عرض: شبكة ؛
    أعمدة شبكة القوالب: 1fr 1fr ؛
}

بنية HTML هي نفسها الموجودة في مثال Flexbox ، لكن CSS مختلفة تمامًا لإنشاء تخطيط الشبكة.

 .حاوية{
    أقصى عرض: 900 بكسل ؛
    لون الخلفية: #fff ؛
    الهامش: 0 تلقائي ؛
    الحشو: 0 60 بكسل ؛
    عرض: شبكة ؛
    أعمدة شبكة القوالب: 1fr 3fr ؛
    مناطق قالب الشبكة:
        "رأس"
        "الشريط الجانبي الرئيسي"
        "تذييل التذييل" ؛
    فجوة الشبكة: 50 بكسل ؛
}

لبدء العمل مع CSS Grid Layout ، من المهم جدًا أن يكون لديك display: grid; مجموعة على الحاوية. يتم الإعلان عن أعمدة قالب الشبكة هنا لإعطاء الهيكل العام للصفحة. تذكر كيف تم تعيين فئة .main على زيادة مرنة من 3 في مثال Flexbox وكان الشريط الجانبي لديه نمو مرن قدره 1 لتحديد الحجم؟ هنا تم تعيين أعمدة قالب الشبكة كـ 1fr و 3fr. هذا هو المكان الذي تتشكل فيه الشبكة مع الوحدات الكسرية. بهذه القيم ، من الواضح أن هناك عمودين غير متساويين في العرض. العمود الذي تم ضبطه على 3fr أكبر بثلاث مرات من العمود الآخر. يوضح هذا كيف يبدو الشريط الجانبي أضيق من منطقة المحتوى.

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

 رأس {
    منطقة الشبكة: رأس ؛
    عرض: شبكة ؛
    أعمدة شبكة القوالب: 1fr 1fr ؛
} 

لوضع الزر ، نحتاج فقط إلى استخدام justify-self وضبطه على النهاية.

 زر العنوان {
    تبرير الذات: النهاية ؛
}

يتم وضع التنقل حيث يجب أن يكون:

 رأس التنقل {
    تبرير الذات: ابدأ ؛
}

لا يحتاج التذييل ذو العرض الكامل إلى تعيين أعمدة مختلفة لأن المحتوى في المنتصف.

كيفية إنشاء تخطيط باستخدام كل من شبكات Flexbox و CSS

الآن وقد رأينا ما يمكن أن تفعله كل طريقة على حدة ، فقد حان الوقت لإنشاء شيء أكثر تعقيدًا من خلال الجمع بين Flexbox و CSS Grid Layouts.

شاهد هذا على Codepen.

فيما يلي المخطط الأساسي لبدء تشغيل الشبكة:

شاهد هذا على Codepen.

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

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

 .حاوية {
  عرض: شبكة ؛
  أعمدة شبكة القوالب: 0.4fr 0.3fr 0.3fr ؛
  فجوة عمود الشبكة: 10 بكسل ؛
  فجوة صف الشبكة: 15 بكسل ؛
}

عادت الوحدات الكسرية لهذا التصميم وهناك الآن ثلاث مناطق مطلوبة. القيمة الأولى 0.4fr أكبر قليلاً من الثانية والثالثة ، وكلاهما 0.3fr.

العمود والصف تخطيط

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

 .header {
  بداية عمود الشبكة: 1 ؛
  نهاية عمود الشبكة: 4 ؛
  بدء صف الشبكة: 1 ؛
  نهاية صف الشبكة: 2 ؛
  لون الخلفية: # d5c9e2 ؛
}

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

 .header {
  عمود الشبكة: 1/4 ؛
  صف الشبكة: 1/2 ؛
  لون الخلفية: # 55d4eb ؛
}

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

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

ملاحة

يعتبر Flexbox مثاليًا لوضع عناصر الرأس. تطرق مثال التخطيط الأساسي إلى هذا مع justify-content: space-between. يحتاج مثال الشبكة إلى تبرير الذات: start ؛ على التنقل وتبرير الذات: النهاية ؛ للزر لوضع الأشياء ، لكن Flexbox جعل التباعد أسهل للتنقل.

 .header {
  عمود الشبكة: 1/4 ؛
  صف الشبكة: 1/2 ؛
  اللون: # 9f9c9c ؛
  تحويل النص: الأحرف الكبيرة ؛
  الحد السفلي: 2 بكسل صلب # b0e0ea ؛
  الحشو: 20 بكسل 0 ؛
  العرض: فليكس ؛
  تبرير المحتوى: مسافة بين ؛
  محاذاة العناصر: مركز ؛
} 

سيتم اتباع نفس التنسيق هنا. استخدم الشعار وعناصر القائمة والزر محتوى تبرير Flexbox للتباعد.

شبكة محتوى العمود

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

محتوى الصف مع النص والأزرار

في قسم "المحتوى الإضافي" ، تمت إضافة ثلاث مناطق تحتوي على نص وأزرار. يجعل Flexbox من السهل الحفاظ على العرض المحدد لثلاثة أعمدة.

 .إضافي {
  عمود الشبكة: 2/4 ؛
  صف الشبكة: 4/5 ؛
  الحشو: 1rem.
  العرض: فليكس ؛
  التفاف المرن: التفاف.
  الحد: 1 بكسل صلب #ecec ؛
  تبرير المحتوى: مسافة بين ؛
}

استثناء واحد Flexbox

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

 .related-images {
  عمود الشبكة: 1/3 ؛
  صف الشبكة: 5/6 ؛
  عرض: شبكة ؛
  أعمدة قالب الشبكة: كرر (4،1fr) ؛
  فجوة الشبكة: 1rem ؛
}
.related-images .icon {
    لون الخلفية: أبيض؛
    المرن: 1 1150 بكسل ؛
}

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

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

موارد

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

• Box Alignment Cheatsheet
• مختبر جين سيمونز للتخطيطات
• دليل كامل للشبكة
• دليل كامل إلى Flexbox

نأمل أن تكون هذه التمارين قد أعطتك فكرة أفضل عن كيفية إنشاء المخططات باستخدام كل من CSS Grid Layouts و Flexbox. ما رأيك في هذه التقنيات الجديدة؟ كيف ساعدوا في عملية التطوير الخاصة بك؟