CSS Flex-box – ההורה

מה המטרה?

CSS Flex-box נוצר במטרה לעזור לנו לשפר את הדרך בה אנו מגדירים את כיוון ומיקום האלמנטים בעמוד, אם בעבר יכולנו להשתמש ב- position, float ו- table הרי שעכשיו אנחנו יכולים לעשות זאת בצורה יותר גמישה שיודעת למקם את האלמנטים בסדר הטבעי שלהם ומבלי לציין כיוון ספציפי בכל אלמנט מחדש, למשל, אם נגדיר את כל העמוד עם כיוון קריאה של right-to-left נוכל למקם בעזרת flex אלמנטים לתחילת העמוד שבמקרה הנ״ל יהיה בצד ימין, וכדי לשנות את כל האלמנטים בעמוד שוב לכיוון שמאל נצטרך לשנות רק את ההגדרה הראשית של כיוון העמוד או האלמנט המכיל ל- left-to-right.

48	10	22.0	11.0	29.0

מאיפה מתחילים?

כדי שנוכל להתחיל לעבוד עם Flex-box אנחנו חייבים להגדיר את האלמנט שישמש כ״הורה״ של האלמנטים אותם אנחנו רוצים לסדר (״הילדים״), לצורך המאמר נקרא לו ה- container וניתן לו חוק CSS של display: flex.

<div class="flex-container" style="display: flex;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

ל- container ניתן לשנות את רשימת החוקים הזו:

• flex-direction
• flex-wrap
• flex-flow
• align-items
• align-content
• justify-content
• gap

Flex direction

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

.flex-container {
  flex-direction: row (default) | row-reverse | column | column-reverse;
}

Flex wrap

כאן נוכל להגדיר האם הילדים אמורים להסתדר בשורה אחת או לתת להם לרדת לשורה חדשה במידה ורוחב ה- container אינו מספיק להכיל את כולם באותה שורה.

.flex-container {
  flex-wrap: nowrap (default) | wrap | wrap-reverse;
}

Flex flow

flex-flow הוא פשוט שילוב של flex-wrap + flex-direction.

.flex-container {
  flex-flow: row|row-reverse|column|column-reverse nowrap|wrap|wrap-reverse;
}

Align items

חוק זה משמש למיקום ״הילדים״ שבתוך ה- container עם תלות בכיוון שלו, אם הגדרנו אותו כ- row אז המיקום יהיה יחסי לציר ה- X אם הגדרנו אותו כ- column אז המיקום יהיה יחסי לציר ה- Y.

.flex-container {
  align-items: flex-start (default) | flex-end | center | stretch | baseline | first baseline | last baseline | start | end | self-start | self-end;
}

Align content

בעזרת חוק זה נוכל לסדר את השורות של האלמנטים במצב שהגדרנו את ה-container בתצורת row או את העמודות במצב שהגדרנו אותו בתצורת column.

חשוב לציין שזה יעבוד רק במידה ויש ל- container שלנו הגדרה של flex-wrap: wrap | wrap-reverse.

.flex-container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Justify content

בעזרת חוק זה נוכל לסדר את השורות של האלמנטים במצב שהגדרנו את ה-container בתצורת row או row-reverse בלבד!

.flex-container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Gap

חוק זה מגדיר את הריווח בין העמודות והשורות שבתוך ה- container.
אם נשתמש ב row-gap או column-gap נוכל גם להגדיר את הריווח בין השורות או העמודות בלבד.

.flex-container {
  gap: 5px;
  gap: 5px 15px; /* row-gap column-gap */
  row-gap: 5px;
  column-gap: 25px;
}

מקורות נוספים:
– https://css-tricks.com/snippets/css/a-guide-to-flexbox
– https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout