CSS | Flexbox

מוטי אורן

מדריך הגדרת קונטיינר על ידי Flexbox

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

בשביל להגדיר קונטיינר של flex, נשתמש ב – display: flex.

לדוגמה, אם נרצה להגדיר div כקונטיינר, נגדיר אותו כך:

div {
  display: flex;
}

לקונטיינר של flex קיימים מספר תכונות, נסקור אותם.

flex-direction:

התכונה flex-direction קובעת את הפריסה של המיכל, במאוזן או במאונך. ניתן לתת לה את הערכים: column – שמציין עמודה (מאונך), column-reverse – שמציין עמודה בכיוון ההפוך (מלמטה למעלה), row – שמציין שורה (מאוזן), ואחרון חביב row-reverse – שמציין שורה בכיוון ההפוך (מימין לשמאל).

flex-wrap:

התכונה קובעת מה קורה במצב שבו קיימים יותר מידי פריטים בקונטיינר. היא מקבלת את הערכים: wrap – שמשמעותו היא שבירת שורה (במקרה שיש יותר מדי ערכים השורה תתחלק לשתים או יותר), no-wrap – שמשמעותו היא לדחוף את הכול באותה שורה, wrap-reverse – שאומר לשבור את השורות כלפי מעלה (הפריטים בקונטיינר יתחילו מהשורה התחתונה).

ניתן לקצר את שתי התכונות דלעיל על ידי התכונה flex-flow כך:

div {
  display: flex;
  flex-flow: row wrap;
}

justify-content:

התכונה הזאת קובעת את היישור של הפריטים באורך הקונטיינר, היא מקבלת את הערכים הבאים: center – יישור למרכז, flex-start – יישור לתחילת הקונטיינר (שמאל), flex-end – יישור לסוף הקונטיינר (ימין), space-around – ממקם את הפריטים במרחק שווה עם ריווחים ביניהם ובין תחילת הקונטיינר לפריטים שבתוכו, space-between – ממקם את הפריטים במרחק שווה ביניהם, ללא מרחק מתחילת הקונטיינר.

align-items:

התכונה קובעת את היישור של הפריטים בגובה הקונטיינר. היא מקבלת מספר ערכים: center – אמצע הגובה, flex-start – תחילת גובה הקונטיינר (למעלה), flex-end – סוף גובה הקונטיינר (למטה), stretch – מותח את הפריטים שהגובה שלהם יהיה מהתחלה עד הסוף.

align-content:

התכונה align-content קובעת את יישור השורות שבקונטיינר. הערכים: center – יישור השורות לאמצע, flex-start – יישור לתחילת הקונטיינר, flex-end – יישור לסוף הקונטיינר, stretch – מותח את השורות על כל הקונטיינר, space-around – ממקם את השורות במרחק שווה ביניהם ובין תחילת וסוף הקונטיינר, space-between – ממקם את השורות במרחק שווה ביניהם, ללא מרחק מתחילת הקונטיינר.

במדריך הבא נדבר על הגדרת האלמנטים עצמם בתוך ה – flex-box. עד אז שיהיה בהצלחה!