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. עד אז שיהיה בהצלחה!