CSS Flexbox Navbar - לוגו משמאל, קישורים מימין
בנו פריסת CSS flexbox בצורה ויזואלית: כיוון-גמיש, יישר-תוכן, יישור-פריטים, עטיפה גמישה ורווח על המיכל, בתוספת גמישות-גידול לכל ילד, כיווץ גמיש ו-flex-base, הכל עם תצוגה מקדימה חיה ו-CSS הניתן להעתקה.
תוצאה
דף זה פותח את הקביעה המוגדרת מראש של מחולל ה-flexbox לפריסת הניווט הקלאסית: Justify-Content מוגדר לרווח-בין ו-align-items מוגדר למרכז. שים לוגו בתיבה הראשונה ושורה של קישורי ניווט בתיבה האחרונה (או פצל את הקישורים על פני התיבות האמצעיות) ומיכל ה-flexbox דוחף אותם לקצוות מנוגדים של הסרגל תוך שמירה על כל פריט בשורה באותו מרכז אנכי, לא משנה כמה גבוה הלוגו או טקסט הקישור.
הרווח-בין הוא מה שגורם לזה לעבוד: הוא מצמיד את הילד הראשון לקצה ההתחלה ואת הילד האחרון לקצה הקצה, ואז מפזר את כל הילדים שנותרו ביניהם באופן שווה - בדיוק הלוגו השמאלי, הקישורים הימניים יוצרים כמעט כל כותרת של אתר שבו משתמשים. align-items: המרכז פותר אז את היישור האנכי שהיה צריך פריצות בגובה קו או טריקים לתצוגה של תא טבלה.
התאם את ספירת הילדים כך שתתאים לסרגל הניווט האמיתי שלך - שתי תיבות לסרגל לוגו חשוף ו-CTA, יותר עבור לוגו פלוס מספר קישורים - וצפה בפריסה מותאמת בשידור חי. העתק את גוש ה-CSS ברגע שהוא תואם לכותרת שלך, או פתח את הרווח-בין הקבוע מראש אם אתה רוצה לראות את המאפיין הזה בהשוואה לקרובים קרובים שלו.