CSS flexbox – אלמנט אב

אחד מהפיצ'רים היותר מדליקים של CSS3 הוא פלקסבוקס שמאפשר לנו להציב אלמנטים בדף בקלות וביעילות רבה יותר תוך שליטה מקסימלית במיקום של האלמנטים.

למה צריך פלקסבוקס?

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

.col {
    width: 33.33%;
    padding: 10px;
}

כי אז יהיה לנו שבירה ואחד הטורים ירד למטה. למה? כי הרוחב הוא 33% אבל הוספת ה-padding מגדילה את הרוחב. אפשר להתגבר על זה כמובן בשיטות הידועות (להקטין את הרוחב ל 32% למשל) אבל זה כאב ראש. פלקסבוקס מאפשרת לנו לקבוע את סדר האלמנטים והדפדפן יחשב את הכל בשבילנו. למשל, משהו בסגנון הבא:

.flex-container {
  display: flex;
}

.flex-item {
    padding: 10px;
  width: 33%;
}

שלושת הטורים יקחו את ה-padding הנדרש ורוחב הטור יהיה 33 אחוז. אותו הדבר עם שוליים.

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

תאימות דפדפנים

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

קונטיינר מול אלמנטים פנימיים

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

פלקסבוקס בסיסי

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

• 1
• 2
• 3

ה-CSS שלהם נראה ככה:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

אפשר לראות שהדבר היחידי שאתם לא מכירים כאן זה שהקונטיינר מכיל display: flex. אבל זה משנה הכל. קודם כל הוא גורם לכל האלמנטים הפנימיים להיות inline. שנית, שימו לב שלמרות שהרוחב של האלמנטים הפנימיים מוגדר כ-200 פיקסלים, הם הרבה פחות. למה? כי הפלקסבוקס מניח שאני רוצה שכולם יהיו בשורה אחת.

שורות מרובות עם flex-wrap

ואם שורה אחת לא מתאימה לי? אני חייב שהם יהיו 200? אין בעיה, למרות שפלקסבוקס מאוד משתדל שכל האלמנטים הפנימיים יהיו בשורה אחת, אפשר לצוות עליו שהם ישמרו על הגודל שלהם באמצעות flex-wrap.

.flex-container-2 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

• 1
• 2
• 3

אפשר גם להגדיר שה-wrap יהיה הפוך! איך זה נראה? ככה:

• 1
• 2
• 3

.flex-container-3 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap-reverse;
}

flex-direction: טור או שורה

אנחנו לא חייבים שהאלמנטים הפנימיים יהיו בשורה אחת, אנו יכולים לבחור שהם יהיו בטור. איך עושים את זה? באמצעות תכונת flex-direction:

• 1
• 2
• 3

.flex-container-4 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

אפשר גם להפוך את הטור או את השורה באמצעות בחירה ב column-reverse או ב-row-reverse

• 1
• 2
• 3

.flex-container-5 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column-reverse;
}

וזה כמובן דבר גאוני כשחושבים על ממשק מעברית לאנגלית, לא? כי מספיק להשתמש ב-row-reverse כדי להמיר משהו מ-LTR ל-RTL:

• 1
• 2
• 3

.flex-container-6 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: row-reverse;
}

justify-content: יישור אופקי של שורה אחת

כאשר אנו רוצים ליישר את השורה, אנו יכולים להשתמש ב-justify-content שמיישרת את התוכן לפי השורה, למשל:

• 1
• 2
• 3
• 4
• 5

.flex-container-7 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;  
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

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

• 1
• 2
• 3
• 4
• 5

.flex-container-8 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

שימו לב ש-space-between שם רווח בין האלמנטים אבל לא שם רווח בין האלמנטים הקיצוניים לאלמנט הפלקסבוקס, בשביל זה צריך להשתמש ב-space-around.

• 1
• 2
• 3
• 4
• 5

.flex-container-9 {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

align-items: יישור אנכי

כפי שאפשר לדאוג לפוזיציה המאוזנת, כך (סוף סוף!) אפשר לדאוג לפוזיציה המאונכת. כלומר לדאוג למיקום האנכי. ואת זה אנו עושים באמצעות align-items שיכולה לקבל: flex-start | flex-end | center | baseline | stretch. הדיפולטיבי הוא flex-start ואני מאמין ש-flex-end הוא די מובן. מה שמעניין הוא center

• 1
• 2
• 3
• 4
• 5

שימו לב שצבעתי את אלמנט האבא בכחול ונתתי לו גובה. איזה יופי!

.flex-container-10 {
  background: blue;
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items:  center;
}

רוצים עוד? מה עם strech?

• 1
• 2
• 3
• 4
• 5

את זה עשיתי עם ה-CSS הבא. כל מה שהייתי צריך לעשות זה לתת ל-align-items את הערך strech ולהקפיד שלאלמנטים הילדים לא יהיה ערך height (אפשר לתת להם min-height או max-height והם יכובדו, אגב).

.flex-container-11 {
  background: blue;
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: strech;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  margin: 10px;  
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

align-content: שליטה ביישור האנכי

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

איך עשיתי את זה? align-content: space-around. זה עובד בדיוק כמו במרכוז האופקי.

.flex-container-12 {
  background: blue;
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

כמובן שזה עובד רק כשיש כמה שורות ולא בשורה אחת. ההבדל העיקרי בין align-content ל-align-items הוא ש-align-content קובע איך השורות עצמן מתנהגות – מפזרות את הרווח ביניהן באופן שווה למשל (כמו ב-space-round) או לא מחלקות בכלל את הרווח – וזה כשיש כמה שורות. align-items קובע את המיקום של כלל השורות.

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