מדריך פלקסבוקס: למד לקודד סרגל nav תגובה עם CSS Flexbox

במאמר זה אסביר כיצד ליצור סרגל חלל המותאם לגדלי מסך שונים באמצעות Flexbox יחד עם שאילתות מדיה.

מדריך זה ניתן למצוא גם כשידור אינטראקטיבי בקורס Flexbox בחינם שלי ב- Scrimba.

לקריאה נוספת על הקורס, עיין במאמר זה.

ההתקנה

נתחיל עם הסימון של סרגל חלף פשוט מאוד:

    

     
Home
     
Profile
     

     
Logout
    

ה

האלמנט הוא מיכל ה- Flex שלנו וה-
• האלמנטים הם פריטי הגמישות שלנו. כדי להפוך אותו לפריסת Flexbox נעשה:

  .container { display: flex; } 

  מה שיביא לפריסה הבאה:

  

  הוספתי קצת סטיילינג, אבל זה לא קשור לפלקסבוקס.

  כפי שאתה יכול לראות, יש לנו קצת מקום נוסף בצד ימין. הסיבה לכך היא ש- Flexbox מניח את הפריטים שעוברים משמאל לימין, וכל פריט הוא רחב ככל שתוכנו מכריח אותו להיות.

  מכיוון שמיכל ה- flex כברירת מחדל הוא אלמנט ברמת בלוק (והוא רחב יותר מארבעת הפריטים) אנו מקבלים את הפער בסוף.

  הסיבה לפריטי החיפוש רחבים יותר מהאחרים היא משום ששדות קלט מוגדרים כברירת מחדל size="20", שדפדפנים ומערכות הפעלה שונות מפרשים בדרכים שונות.

  תגובה # 1

  כדי לתת את ההיענות הבסיסית של סרגל ה- navbar שלנו, פשוט נעניק לפריט החיפוש ערך flex של 1.

  .search { flex: 1; } 

  כתוצאה מכך פריט החיפוש מתרחב ומתכווץ עם רוחב המכולה, כלומר לא נקבל את המרחב הנוסף בצד ימין.

  

  אמנם הגיוני לפריט החיפוש יגדל בזמן שהאחרים יישארו קבועים, אבל אתה יכול לטעון שהוא יכול להיות רחב מדי בהשוואה לאחרים. אז אם אתה מעדיף שכל הפריטים יגדלו עם רוחב המיכל במקום זאת, אתה יכול פשוט לתת לכל הפריטים flexערך 1.

  .container > li { flex: 1; } 

  כך זה משחק:

  

  אתה יכול גם לתת לפריטים ערכי כיפוף שונים, מה שיגרום להם לצמוח במהירויות שונות. אל תהסס להתנסות בזה במגרש המשחקים הזה של Scrimba.

  בהמשך ההדרכה נמשיך בפתרון הראשון, שבו פריטי החיפוש הם היחידים עם flexערך.

  תגובה # 2

  סרגל הניווט שלנו עובד היטב על מסכים רחבים. עם זאת, על צרים יותר זה נקלע לבעיות, כפי שניתן לראות כאן:

  

  בשלב מסוים, לא כדאי להחזיק את כל הפריטים באותה שורה, מכיוון שהמכולה הופכת צרה מדי. כדי לפתור את זה נוסיף שאילתת מדיה בה נחלק את ארבעת הפריטים שלנו לשתי שורות. שאילתת המדיה תבעט כאשר המסך רוחב 600 פיקסלים:

  @media all and (max-width: 600px) { .container { flex-wrap: wrap; } .container > li { flex-basis: 50%; } } 

  ראשית, אנו מאפשרים לפריסת Flexbox לעטוף איתה flex-wrap. זה כברירת מחדל מוגדר ל nowrap, אז נצטרך לשנות את זה ל wrap.

  הדבר הבא שאנו עושים זאת מגדיר את flex-basisערך הפריטים ל- 50%. זה אומר ל- Flexbox לגרום לכל פריט לקחת 50% מהרוחב הזמין, מה שמביא לשני פריטים בשורה, כך:

  

  הערה: ריכזתי גם את טקסט מציין המיקום בשדה קלט החיפוש.

  עכשיו יש לנו שני מצבים שונים. עם זאת, פריסה זו עדיין לא עובדת על מסכים קטנים מאוד, כמו מסכים ניידים במצב דיוקן.

  אם נמשיך לכווץ את המסך, זה ייגמר כמו התמונה למטה.

  

  מה שקרה כאן הוא שהשורה השנייה כבר לא יכולה להתאים לשני פריטים.

  ההתנתקות ופריטי החיפוש פשוט רחבים מדי, מכיוון שלא ניתן לכווץ אותם מתחת לרוחב המינימלי שלהם, שהוא הרוחב הדרוש להם על מנת למלא את התוכן בתוכם.

  פריטי הבית והפרופיל עדיין יכולים להופיע באותה שורה, ולכן Flexbox יאפשר להם לעשות זאת. זה לא אופטימלי, מכיוון שאנחנו רוצים שכל השורות שלנו יתנהגו באותה צורה.

  תגובה # 3

  כך שברגע שאחת מהשורות לא יכולה להתאים לשני פריטים ברוחב, אנו רוצים שאף אחת מהשורות לא תכלול שני פריטים ברוחב. במילים אחרות, על מסכים קטנים מאוד נהפוך את סרגל הניווט לאנכי. נערום את הפריטים זה על זה.

  כדי להשיג זאת עלינו פשוט לשנות את רוחב 50% ל 100%, כך שכל שורה תתאים רק לפריט יחיד. נוסיף נקודת שבירה זו ב -400 פיקסלים.

  @media all and (max-width: 400px) { .container > li { flex-basis: 100%; } .search { order: 1; } } 

  בנוסף לכך, ברצוני למקם את פריט החיפוש בתחתית, ולכן אני גם ממקד את החיפוש ונותן לו orderערך 1.

  התוצאה היא:

  

  הסיבה order: 1;שהתוצאות להצבת פריט החיפוש בתחתיתן הן מכיוון שלפריטים להגמיש כברירת מחדל יש ערך אפס, וכל פריט שיש לו ערך גבוה מזה יונח אחרי האחרים.

  כדי לראות איך הכל מסתדר, הנה הגיף מלמעלה של המאמר:

  

  מזל טוב! כעת אתה יודע ליצור סרגל-תגובה רספונסיבי באמצעות שאילתות Flexbox ומדיה.

  אם אתה מעוניין ללמוד עוד על Flexbox, אני ממליץ לך לבדוק את הקורס החינמי שלי ב- Scrimba.

  תודה שקראת! שמי פר בורגן, אני מייסד שותף של Scrimba - הדרך הקלה ביותר ללמוד לקודד. כדאי לבדוק את ה- bootcamp הרספונסיבי שלנו לעיצוב אתרים אם רוצים ללמוד לבנות אתר מודרני ברמה המקצועית.