למד CSS Flexbox תוך 5 דקות - הדרכה למתחילים

מבוא מהיר למודול הפריסה הפופולרי

בפוסט זה תלמד את היסודות של CSS Flexbox, שהפך למיומנות חובה עבור מפתחי אתרים ומעצבים בשנתיים האחרונות.

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

יצרתי גם קורס בן 12 חלקים בחינם ב- Flexbox. בדוק את זה כאן אם אתה מעוניין!

עכשיו בואו נתחיל!

פריסת ה- Flexbox הראשונה שלך

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

הנה ה- HTML לדוגמא שלנו, המכיל מיכל עם שלושה פריטים:

 Home Search Logout 

לפני שנהפוך את זה לפריסת Flexbox, האלמנטים ייערמו זה על גבי זה כך:

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

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

כדי להפוך זאת לפריסת Flexbox, פשוט ניתן למכולה את המאפיין CSS הבא:

.container { display: flex; } 

פעולה זו תמקם את הפריטים באופן אוטומטי יפה לאורך הציר האופקי.

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

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

הצדק תוכן ויישר פריטים

Justify-content ו- align-items הם שני מאפייני CSS שעוזרים לנו להפיץ את הפריטים במיכל. הם שולטים כמה מהפריטים ממוקמות לאורך הציר הראשי ואת ציר חוצה .

במקרה שלנו (אך לא תמיד) הציר הראשי הוא אופקי וציר הצלב הוא אנכי:

במאמר זה נבחן רק justify-content, כיוון שגיליתי שאני משתמש בזה הרבה יותר מ align-items. עם זאת, בקורס פלקסבוקס אני מסביר בפירוט את שני המאפיינים.

בואו מרכז את כל הפריטים לאורך הציר הראשי באמצעות justify-content:

.container { display: flex; justify-content: center; } 

לחלופין, אנו יכולים להגדיר אותו ל space-between, אשר יוסיף רווח בין הפריטים, כך:

.container { display: flex; justify-content: space-between; } 

להלן הערכים שתוכל להגדיר עבורם justify-content:

  • flex-start ( ברירת מחדל )
  • flex-end
  • מֶרְכָּז
  • רווח בין
  • מרחב מסביב
  • באופן שווה

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

שליטה על פריט יחיד

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

לשם כך נשתמש בטכניקה הישנה והטובה של הגדרת השוליים ל auto.

.logout { margin-left: auto; } 

אם נרצה שגם searchהפריט וגם logoutהפריט יידחקו לצד ימין, פשוט נוסיף margin-leftאת searchהפריט במקום.

.search { margin-left: auto; } 

זה ידחוף את פריט החיפוש כמה שיותר לצד הימני, מה ששוב ידחף את פריט היציאה איתו:

נכס ה- flex

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

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

.container > div { flex: 1; } 

כפי שאתה יכול לראות, זה מותח את הפריטים כדי למלא את כל המכולה.

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

.search { flex: 1; } 

לפני שנסיים מאמר זה, ברצוני להזכיר כי מאפיין ה- flex הוא למעשה שלוש תכונות קצרות: flex-grow , flex-shrink ו- flex-basis . עם זאת, ללמוד אותם לוקח יותר מחמש דקות, כך שזה מחוץ לתחום הדרכה זה.

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

כעת, לאחר שלמדת את היסודות, אתה בהחלט מוכן ללמוד את הקורס באורך מלא ולהפוך למאסטר ב- Flexbox!

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