CSS Flexbox Navbar — الشعار على اليسار والروابط على اليمين
أنشئ تخطيط CSS flexbox بشكل مرئي: الاتجاه المرن، وضبط المحتوى، ومحاذاة العناصر، والالتفاف المرن والفجوة في الحاوية، بالإضافة إلى النمو المرن لكل طفل، والتقليص المرن، والأساس المرن، كل ذلك مع معاينة مباشرة وCSS قابل للنسخ.
النتيجة
تفتح هذه الصفحة الإعداد المسبق لمولد flexbox لتخطيط شريط التنقل الكلاسيكي: ضبط المحتوى مضبوطًا على مسافة بين العناصر ومحاذاة العناصر مضبوطة على المركز. ضع شعارًا في المربع الأول وصفًا من روابط التنقل في المربع الأخير (أو قم بتقسيم الروابط عبر المربعات الوسطى) وستدفعهم حاوية flexbox إلى طرفي نقيض من الشريط مع الحفاظ على كل عنصر محاذيًا في نفس المركز الرأسي، بغض النظر عن طول الشعار أو نص الرابط.
المسافة بين هو ما يجعل هذا العمل ناجحًا: فهو يثبت الطفل الأول على حافة البداية والطفل الأخير على حافة النهاية، ثم يوزع أي أطفال متبقيين بالتساوي بينهما - وهو بالضبط شكل الشعار الأيسر والارتباطات اليمنى الذي يستخدمه كل رأس موقع تقريبًا. align-items: center يقوم بعد ذلك بحل المحاذاة الرأسية التي كانت تحتاج إلى اختراقات لارتفاع الخط أو حيل عرض خلايا الجدول.
اضبط عدد الأطفال ليتوافق مع شريط التنقل الحقيقي لديك - صندوقان لشريط الشعار وشريط الحث على اتخاذ إجراء، والمزيد للشعار بالإضافة إلى العديد من الروابط - وشاهد التخطيط وهو يتكيف مباشرة. انسخ كتلة CSS بمجرد مطابقتها لرأسك، أو افتح المسافة بين الإعداد المسبق إذا كنت تريد رؤية تلك الخاصية الواحدة مقارنة بأقاربها المقربين.