وبالتحديد ، سأوضح لك هنا كيفية استخدام تخطيطات Flexbox لإنشاء رؤوس عالية الجودة لمواقع الويب. سوف أشارك بعض النصائح ، وفي النهاية ، سأعرض مشروعي ، الذي تم إنشاؤه خصيصًا لهذه المادة. لذلك ، إذا كنت مهتمًا حقًا بالموضوع الذي قررت طرحه هنا ، فعليك بالتأكيد قراءة هذه المقالة حتى النهاية.
هنا أفترض أنك تعرف أساسيات تخطيط Flexbox. هنا ، فقط في حالة ، مقالتي مكتوبة لأولئك الذين يريدون معرفة المزيد عن خاصية CSS
flex.
المقدمة
أولاً ، لنتأكد من أنك وأنا نسمي "رأس الموقع" أو "رأس الموقع" نفس الشيء. يعد رأس الموقع أحد عناصر الصفحة الأولى التي يراها المستخدم عند زيارة أحد المواقع. عادة ما تحتوي على شعار أو اسم الموقع ، بالإضافة إلى روابط التنقل. ألق نظرة على الشكل التالي.
شعار الموقع وروابط التنقل وحاوية جزء الرأس
بغض النظر عن تصميم جزء رأس الموقع ، فإن عناصره الرئيسية هي الشعار وقائمة الارتباطات.
تقنية Flexbox قيد التشغيل
عندما يتم إنشاء تخطيط رأس الموقع باستخدام تقنية Flexbox ، يتم ترتيب جميع العناصر في نفس المستوى في سطر واحد. ثم كل ما تبقى هو استخدام الخاصية
justify-contentلمحاذاة العناصر عن طريق توزيع المساحة الحرة بينها.
هذا هو رمز الترميز:
<header class="site-header">
<a href="#" class="brand">Brand</a>
<nav class="nav"></nav>
</header>
إليك الأنماط:
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
إنه ليس معقدًا على الإطلاق ، أليس كذلك؟ حسنًا ، لمثل هذا العنوان البسيط ، إنه كذلك. لكن من الناحية العملية ، يمكن أن تكون الأمور أكثر تعقيدًا.
حاوية رأس الصفحة
لا يحتوي ترميز رأس الصفحة الموضح في القسم السابق على عنصر حاوية داخلي يحتوي على عناصر تمثل الشعار وروابط التنقل. على الشاشات الكبيرة ، قد يكون استخدام هذا التخطيط مشكلة.
تم إنشاء تخطيط رأس الصفحة بدون استخدام حاوية داخلية (أعلاه) واستخدام حاوية (أدناه)
لاحظ أن رأس الصفحة الأول واسع جدًا نظرًا لعدم استخدام الحاوية الداخلية عند إنشائها. لكن التصميم الثاني يبدو أفضل بكثير. لذلك ، يجب إعادة كتابة كود HTML للمثال السابق على النحو التالي:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
</div>
</header>
ويجب تطبيق الأنماط المرنة على العنصر
.site-header__wrapper:
.site-header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
استخدام خاصية اللفافة المرنة
الخاصية
flex-wrapهي نوع من آلية أمان CSS. إذا كان حجم الشاشة صغيرًا ، فهناك احتمال أن تضطر إلى استخدام التمرير الأفقي للعمل مع جزء رأس الصفحة. هذا ما يبدو عليه.
للعمل مع عنوان الصفحة ، تحتاج إلى استخدام التمرير الأفقي. الشيء هو أن خاصية flex-wrap غير مستخدمة هنا: التفاف
كما ترى ، سيكون من غير المناسب العمل مع هذه الصفحة. لذلك لا تنسى الممتلكات
flex-wrap!
استكشاف خيارات تخطيط مختلفة لأقسام رأس الصفحة
ما أحبه في تخطيطات Flexbox هو أنها تسهل دعم التصميمات المختلفة لأقسام رؤوس الصفحات. في هذا القسم ، بناءً على المثال أعلاه ، سأستكشف إمكانيات توسيع التخطيط عن طريق إضافة عناصر جديدة إليه ، مثل الأزرار وحقول البحث. أريد على الفور استكشاف طرق لتغيير ترتيب عرض الأطفال في رأس الصفحة.
▍ البديل رقم 1
الإصدار الأول من جزء رأس الصفحة
تمت إضافة زر إلى هذا التخطيط ، تم وضعه بعد كتلة روابط التنقل. كيف افعلها؟ هل أحتاج إلى تنسيقه كارتباط موضوع داخل العنصر
<nav>؟ أو ربما ينبغي جعله عنصرًا منفصلاً؟ انا سوف اقوم بعمل ذلك فقط.
ها هي HTML لفكرتي:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
في هذه الحالة ، لا يمكن تعيين المسافة بين العناصر باستخدام الخاصية
justify-content: space-between. بدلاً من ذلك ، سأستخدم الخاصية لمحاذاة كتلة الروابط margin-left: auto. سيؤدي ذلك إلى دفع الروابط والأزرار إلى الجانب الأيمن من الحاوية.
يتم الضغط على العناصر ، بفضل margin-left: auto ، على الجانب الأيمن من الحاوية. يعتبر
فصل الزر عن كتلة الارتباط أمرًا ذا قيمة لتخطيطات الأجهزة المحمولة ، حيث ، على سبيل المثال ، قد تحتاج إلى ترك الزر وتقديم كتلة الارتباط كقائمة منسدلة.
رأس الصفحة على سطح المكتب والجوال
▍ الخيار رقم 2
البديل الثاني لجزء العنوان من الصفحة
لقد قمنا هنا بتوسيع إمكانيات جزء العنوان من الصفحة بإضافة حقل بحث إليه. يشغل المساحة الخالية المتبقية بعد وضع العناصر الأخرى على الصفحة. باستخدام تخطيطات Flexbox ، يمكن تحقيق ذلك من خلال تطبيق الخاصية
flex.
ها هي الترميز:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<div class="search"></div>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
هذا هو النمط المطبق على مربع البحث:
.search {
flex: 1;
}
هذا كل شئ! الآن سيملأ الحقل المساحة الفارغة بين الشعار وكتلة الارتباط. ومع ذلك ، فإن هذا النهج له بعض القيود. على الشاشات الصغيرة ، سيبدو عنوان الصفحة كما يلي.
رأس الصفحة على شاشة صغيرة
يجب ألا يقل عرض حقل البحث عن حجم معين. خلاف ذلك ، سيكون من الصعب إدخال نص فيه. فيما يلي العديد من الحلول لهذه المشكلة.
حل المشكلة الناتجة عن تقليل عرض حقل البحث على الشاشات الصغيرة
أفضل الخيار الثاني ، لأنه عند استخدامه ، لا يتم إخفاء كتلة الارتباط في وقت مبكر جدًا. بشكل عام ، يمكنني ملاحظة أنني أحاول عدم إخفاء العنصر في حالة عدم تداخله مع العرض الصحيح للتخطيط.
▍ الخيار رقم 3
الإصدار الثالث من جزء العنوان
هذا هو نفس الترميز مثل الإصدار الأول من العنوان. ولكن هنا تم تغيير ترتيب عرض العناصر على الشاشة. كيف افعلها؟ قد تقرر استخدام الملكية هنا
order. دعنا نستكشف هذه الفكرة.
ها هو HTML:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
إليك الأنماط:
.site-header {
display: flex;
justify-content: space-between;
}
.nav {
order: -1;
}
وهذا ما تبدو عليه نتيجة تقديم كل هذا.
لا يؤدي استخدام خاصية justify-content: space-between إلى محاذاة الشعار مع المركز. توزع هذه الخاصية المساحة الحرة بين العناصر فقط ،
وحل هذه المشكلة هو تعيين كل عنصر فرعي في رأس الصفحة بخاصية
flex: 1. سيؤدي هذا إلى توزيع المسافة بين العناصر.
إليك الأنماط:
.brand,
.nav,
.button {
flex: 1;
}
توزيع موحد للمساحة الحرة بين عناصر جزء العنوان بالصفحة
ومع ذلك ، حدث شيء غريب مع الزر. لقد أصبح ، بسبب تطبيق الممتلكات
flex: 1، طويلاً جدًا. الطريقة الوحيدة لإصلاح ذلك هي وضع الزر في عنصر الحاوية:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<div class="button-wrapper">
<a href="/track-shipment" class="button">Track</a>
</div>
</div>
</header>
باستخدام هذا الأسلوب ، يمكنك محاذاة كل من الشعار والزر في الوسط:
.logo {
text-align: center;
}
/* . - , , . */
.button-wrapper {
text-align: end; /* end - , LTR-, , right */
}
محاذاة العناصر
هذا النهج ، مع ذلك ، ليس مثاليًا أيضًا. تذكر أنه إذا كان هناك المزيد من الروابط في مجموعة التنقل ، فسيؤدي ذلك إلى حدوث مشكلات. وبالتحديد ، من الضروري هنا ألا يتجاوز عرض كتلة التنقل حجمًا معينًا. إليك مثال حيث يفقد الشعار محاذاته المركزية.
لم يعد الشعار مركزًا.
كما ترى ، في الصورة السابقة ، لم يعد الشعار في المنتصف. يجدر بنا أن نتذكر هذه الميزة من النهج أعلاه حتى لا تواجه مشاكل غير متوقعة.
الآن بعد أن اكتشفنا الخيارات المختلفة لتصميم تخطيطات رأس لمواقع الويب وتحدثنا عن كيفية إنشاء مثل هذه التخطيطات ، فلنلقِ نظرة على بعض الأفكار المهمة التي يمكن أن تساعدنا عند إنشاء أقسام رأس للصفحات.
نصائح لتصميم رؤوس الصفحات المستندة إلى Flexbox
▍ خاصية الأساس المرن
أفضل استخدام خاصية
flex-basis: 100%عندما يحتاج العنصر إلى العرض الكامل على الأجهزة المحمولة. على سبيل المثال ، إذا كنا نتحدث عن كتلة مهمة من روابط التنقل لا يمكن إخفاؤها.
نتيجة تطبيق خاصية الأساس المرن هي 100٪
قد يبدو تطبيق هذه الخاصية ، إذا نظرت إلى الشكل السابق ، مسألة بسيطة. في الواقع. هذه ليست القضية. عادة ، يمكن أن يحتوي رأس الموقع على مساحة متروكة ، وإذا قمنا بتعديل العنصر لملء العرض الكامل ، فلن يحدث هذا حتى تتداخل الحشوة. ومع ذلك ، فإن إزالتها غير عملية ، حيث ستؤثر على العناصر الأخرى في التخطيط.
إليك كيفية حل هذه المشكلة:
- دعنا نضيف
flex: 1 0 100%إلى كتلة التنقل. - دعنا نغير ، إذا لزم الأمر ، ممتلكاته
order. في بعض الأحيان ، يتعين علينا الاهتمام بالعناصر الأخرى أيضًا ، لذلك نحتاج إلى التأكد من أن مربع التنقل هو العنصر الأخير. - دعونا نضبط هوامش قالب التنقل باستخدام قيمة سالبة تساوي حجم الهوامش الداخلية. سيسمح هذا لهذه الكتلة بملء العرض الكامل للصفحة.
- دعونا نضبط الحشو بحيث يكون هناك القليل من "الهواء" في العنصر.
- أخيرًا ، سنستخدم الخاصية
justify-content: centerلتوسيط عناصر التنقل (على الرغم من أن هذا ليس مهمًا بشكل خاص).
فيما يلي الأنماط (توجد بين قوسين مربعين العناصر الموجودة في القائمة أعلاه التي تتعلق بها):
.nav {
flex: 1 0 100%; /* [1] */
order: 2; /* [2] */
margin: 1rem -1rem -1rem -1rem; /* [3] */
padding: 1rem; /* [4] */
display: flex; /* [5] */
justify-content: center; /* [5] */
}
وإليك كيف سيبدو التطبيق خطوة بخطوة للأنماط المذكورة أعلاه على قائمة عناصر التنقل.
عناصر التصميم خطوة بخطوة
▍ ضبط المسافة بين العناصر
الآن بعد أن دعم متصفحي Chrome و Firefox الخاصية
gap، أصبح من السهل جدًا ضبط التباعد بين العناصر المرنة. ألق نظرة على قسم الرأس التالي من الصفحة.
استخدام خاصية الفجوة
لضبط المسافة بين العناصر المحددة في الشكل ، تحتاج إلى إضافة خاصية إلى العنصر المرن الأصل
gap: 1rem. بدون استخدام هذه الخاصية ، سيتعين علينا تصميم العناصر بنفس الطريقة.
/* */
.brand {
margin-right: 1rem;
}
.sign-in {
margin-right: 1rem;
}
/* */
.site-header {
/* flexbox-*/
gap: 1rem;
}
إذا كنت تستخدم خاصية
gap، فتذكر أنك ستحتاج إلى التحضير والرجوع في حالة عدم دعمها من قبل المتصفح الذي يتم عرض الصفحة فيه. لقد كتبت مقالة مفصلة عن هذا .
بهذا تنتهي المحادثة ، ولكن قبل أن نفترق ، اسمحوا لي أن أعرض عليكم أحد مشاريعي.
مشروع Headers-css
فيما يلي مثال على رؤوس الصفحات التي تم إنشاؤها داخل مشروع headers-css.
رؤوس الصفحات من headers-css
قررت إنشاء مشروع يتم فيه تجميع قوالب لأجزاء رأس من مواقع الويب ، مصممة كصفحات منفصلة. الآن ، إذا كنت بحاجة إلى عنصر مشابه ، يمكنني العثور عليه بسرعة ودمجه في مشروع جديد. وبالتحديد ، قمت بإنشاء 17 نوعًا مختلفًا من رأس الصفحة. أخطط لتوسيع هذا المشروع في المستقبل القريب. أثناء العمل على هذه العناصر ، أولت اهتمامًا خاصًا لما يلي:
- المرونة.
- تصميم سريع الاستجابة.
- استخدام Sass ، مما يجعل من السهل تحرير القوالب الخاصة بي (على الرغم من أنني في هذا المجال ما زلت بحاجة إلى إعادة تشكيل الكود قليلاً)
- إمكانية الوصول (إذا صادفت شيئًا خاطئًا - يرجى إضافة إدخال إلى أداة تعقب مهام المشروع).
إليك صفحة لمشاهدة مشروع headers-css قيد التنفيذ. و هنا هو جيثب مستودع للمشروع.
كيف تقوم بإنشاء أجزاء رأس صفحات الويب الخاصة بك؟
