עולמה של Flexbox – יישור אלמנטים ב Flex Container

המדריך המלא לשימוש ב Flexbox.

השימוש בגריד כזה או אחר היה מאז ומתמיד בשימוש נרחב בהקשר של עיצוב אתרים. סביר להניח כי נתקלתם לא פעם באתרים הבנויים על CSS Framework כלשהו כגון Bootstrap, Foundation וכדומה שמאפשרים שימוש בקלאסים מוכנים ליצירת עמודות ושורות.

אך כרוב המפתחים אני מעדיף לא להסתמך ולהיות תלוי בעניינים חיצוניים ומעדיף לוותר על על הוספה של נכסים חיצוניים כשאני מפתח אתר. מה גם שנכסים אלו, אם לא משתמשים בהם נכון מוסיפים לא מעט CSS ו Javascript מיותרים ועלולים לפגוע בזמן טעינת האתר. למעשה, גם כאשר אני משתמש באותם Frameworks, ברוב המקרים הדבר היחיד בו אני נעזר הוא השימוש ב Grid Layouts לטובת עימוד בלבד ולא בשאר אפשרויות העיצוב.

אז כיצד ניתן ליצור את אותם עימודים בצורה קלה ומהירה? כיצד ליישר אלמנטים בצורה נוחה? Flexbox זו התשובה כמעט תמיד, במיוחד כשמדובר על עימודים חד מימדיים, ושלא כמו CSS Grid המיועד בד״כ עבור עימוד דו מימדי.

במדריך זה נראה בהרחבה כיצד להשתמש בתכונות ה justification וה alignment של Flexbox. נתחיל!

יישור אלמנטים ב Flex Container

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

לפני שנמשיך ובכדי להבין כיצד Flexbox עובד – חשוב כי תבינו את ההתייחסות של Flexbox לציר ה-X הנקרא Main-Axis ולציר ה-Y הנקרא Cross-Axis.

Flexbox Axis LTR - פלקסבוקס

עם האתר שלכם בעברית (RTL), ה Main Axis הפוך כמובן – מתחיל בימין ונגמר בשמאל. הדוגמאות בפוסט זה יהיו בהתאם כמובן:

Flexbox Axis RTL - פלקסבוקס

בכדי ליישר אלמנט אנכית למרכז ציר ה-Y נשתמש בתכונה align-items. לעומת זאת בכדי ליישר אלמנטים אופקית בציר ה-X נשתמש בתכונה justify-content כבדוגמה הבאה:

.flex-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-wrapper > div {
    height: auto;
    min-width: 60px;
    min-height: 60px;
}
<div class="flex-wrapper">
     <div>1</div>
</div>

הנה התוצאה:

1

תכונות Flex השולטות ביישור אלמנטים

התכונות בהן ניתן מבט במהלך מדריך זה הינן התכונות הבאות הקיימות בספסיפיקציה CSS Box Alignment Level 3:

  • justify-content — שולטת ביישור האלמנטים כמכלול בציר ה-X.
  • align-items —שולטת ביישור האלמנטים כמכלול בציר ה-Y.
  • align-self —שולטת ביישור אלמנט Flex יחיד בציר ה-Y.
  • align-content —שולטת בריווח בין שורות Flex בציר ה-Y.

ציר ה Y האנכי – The Cross Axis

התכונות align-items ו align-self שולטות ביישור האלמנטים לאורך ציר ה-Y, בכיוון אנכי כאשר קיימת התכונה flex-direction: row ובכיוון אופקי עם שימוש בתכונה flex-direction: column.

אם נוסיף את התכונה display : flex לקונטיינר, הבנים של זה יהיו אלמנטים של Flex המסודרים בשורה כברירת מחדל בצורה הבאה (הקו המפריד קיים רק בכדי שתבחינו בין האלמנטים):

אחת
שתיים
אלמנט שלוש מכיל יותר טקסט

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

אחת
שתיים
אלמנט שלוש
מכיל יותר
טקסט

עליכם להבין כי אם לקונטיינר קיים גובה מוגדר (נאמר 300px), האלמנטים ימתחו לגובה זה ללא אבחנה בתוכן הקיים באותם אלמנטים.

הסיבה שאלמנטים נמתחים לאותו גובה היא שברירת המחדל של התכונה align-items הקובעת את יישור האלמנטים לאורך ציר ה-Y היא stretch וזו מותחת את האלמנטים כמה שניתן בתוך הקונטיינר.

כמובן שניתן להשתמש בערכים אחרים בכדי לקבוע כיצד האלמנטים יהיו מיושרים:

  • align-items: flex-start
  • align-items: flex-end
  • align-items: center
  • align-items: stretch
  • align-items: baseline

בואו נראה מספר דוגמאות לאפקט של התכונה align-items בציר ה-Y:

.flex-wrapper {
    display: flex;
    align-items: stretch;

}

.flex-wrapper > div {
    min-width: 60px;
    min-height: 60px;
    height: auto;
}

קוד זה יספק את התוצאה הבאה (אין זה חובה להוסיף את align-items : stretch מכיוון והיא ברירת המחדל):

align-items : stretch

1
2
3
4

שינוי אך ורק של התכונה align-items יביא את התוצאות הבאות:

align-items : flex-start

1
2
3
4

align-items : flex-end

1
2
3
4

align-items : center

1
2
3
4

לא נסביר את בפוסט זה את ההבדל בין flex-start ל baseline. מוזמנים לתת מבט בתשובה הבאה ב StackOverflow.

יישור אלמנט יחיד באמצעות התכונה align-self

חשוב להבין – התכונה align-items בעצם קובעת את התכונה align-self על כל האלמנטים בקונטיינר כמכלול. זה אומר כי ניתן מפורשות להכריז על התכונה align-self עבור אלמנט יחיד בקבוצה.

התכונה align-self יכולה לקבל את כל הערכים שהתכונה align-items יכולה לקבל, אך ניתן להגדירה גם כ auto, שלבטח הנחתם – תגרום לאלמנט להתייחס לערך שנקבע עבור הקונטיינר עצמו.

בדוגמה הבאה הקונטיינר הוא בעל התכונה align-items : start, מה שאומר שכל האלמנטים יתיישרו לתחילת ציר ה-Y. קבענו כי האלמנט הראשון יהיה בעל התכונה align-self : stretch כאשר האלמנט השלישי יהיה בעל התכונה align-self : center:

.flex-wrapper {
    align-items: flex-start;
    display: flex;
    height: 240px;
}

.flex-wrapper > div {
    height: auto;
    min-width: 60px;
    min-height: 60px;
}

.flex-wrapper > div:nth-child(1) {
    align-self: stretch;
}

.flex-wrapper > div:nth-child(3) {
    align-self: center;
}

וזו תהיה התוצאה:

1
2
3
4

הפיכת הצירים – שינוי ה Main Axis

ראינו עד כה את ההתנהגות כאשר flex-direction שווה ל row כך שההתייחסות של התכונות align-items ו align-self יישרו את האלמנטים מעלה ומטה לאורך ציר ה-Y. אך אם נשנה את flex-direction ל column, הצירים יתהפכו, ותכונות אלו יישרו אלמנטים שמאלה וימינה:

כאשר flex-direction : row:

flex-start
center
flex-end

לעומת זאת – כאשר flex-direction : column זו תהיה התוצאה:

flex-start
center
flex-end

בכדי להבין טוב יותר כיצד שינוי זה משפיע על התכונות align-items ו align-self, תנו מבט בדוגמה הבאה, שהיא בדיוק כמו הדוגמה הצבעונית האחרונה שהצגתי מעלה אך בעלת flex-direction : column:

1
1
1
1

יישור אלמנטים ב Cross Axis

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

התכונה align-content

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

התכונה align-content מקבלת את הערכים הבאים:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (אינה מוגדרת בספסיפיקציה של Flexbox)

בדוגמה הבאה הקונטיינר בגובה 300px אשר גבוה יותר מהנדרש עבור האלמנטים שלנו. הערך של align-content בדוגמה הראשונה הינו space-between הקובע כי האיזור הריק שקיים יחולק שווה בשווה בין השורות, וזאת כאשר האלמנט הראשון והאחרון יצמדו לגבולות הקונטיינר.

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

.flex-wrapper {
    display: flex;
    height: 360px;
    flex-wrap: wrap;
    align-content: space-between;
}

.flex-wrapper > div {
    width: calc(100% / 3);
}
    
.flex-wrapper > :nth-child(7), 
.flex-wrapper > :nth-child(8) {
    width: 50%;
}

align-content : space-between

1
2
3
4
5
6
7
8

לא נעבור על כל האפשרויות, אך הנה מספר דוגמאות נוספות בהן שינינו רק את התכונה align-content בקוד מעלה:

align-content : center

1
2
3
4
5
6
7
8

align-content : stretch

1
2
3
4
5
6
7
8

align-content : space-around

1
2
3
4
5
6
7
8

ציר ה X האופקי – The Main Axis

כעת, ולאחר שראינו כיצד יישור אלמנטים עובד בציר ה Y, ניתן מבט על ציר ה X. בציר ה X קיימת עבורינו תכונה אחת והיא justify-content וזאת מכיוון ואנו מתייחסים ללאלמנטים כקבוצה בציר ה X.

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

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

.flex-wrapper {
    display: flex;
    justify-content: flex-start;
}
1
2
3

לתכונה justify-content אותם ערכים שקיימים לתכונה align-content:

  • justify-content: flex-start
  • justify-content: flex-end
  • justify-content: center
  • justify-content: space-between
  • justify-content: space-around
  • justify-content: space-evenly (אינה מוגדרת בספסיפיקציה של Flexbox)

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

justify-content : space-between

.flex-wrapper {
    display: flex;
    justify-content: space-between;
}
1
2
3

שינוי אך ורק התכונה justify-content יוביל לתוצאות הבאות:

justify-content : flex-end

1
2
3

justify-content: center

1
2
3

justify-content : space-around

1
2
3

אם קיימת התכונה flex-direction : column אז התכונה justify-content תחלק את השטח הריק לאורך ציר ה Y וזאת כל עוד הקונטיינר גבוה יותר מהאלמטים עצמם יחדיו:

.flex-wrapper {
    flex-direction: column;
    height: 300px;
    justify-content: space-between;
}

זו התוצאה:

1
2
3

התכונה Flex Direction

ראינו כי התכונה flex-direction קובעת כיצד יונחו האלמנטים בקונטיינר ומגדירה את ה Main Axis – כאשר החלפת  flex-direction : row ב flex-direction : column הופכת בין ציר ה X לציר ה Y.

אך flex-direction יכולה גם לקבוע את הכיווניות של האלמנטים (רגילה או הפוכה). האפשרויות של התכונה הינם הבאות:

flex-direction: row

1
2
3

flex-direction: row-reverse

1
2
3

flex-direction: column

1
2
3

flex-direction: column-reverse

1
2
3

נזכיר ונאמר כי התכונה flex-direction מושפעת מכיווניות האתר (RTL or LTR).

שימוש ב auto margins ליישור אלמנטים ב Main Axis

לא קיימת עבורינו התכונה justify-items או justify-self עבור ה Main Axis ולאלמנטים מתייחסים כקבוצה בציר זה. עם זאת, ניתן לבצע יישורים אינדיבידואלים על מנת להפריד אלמנט או קבוצת אלמנטים מאחרים באמצעות שימוש ב auto margins.

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

.flex-wrapper {
    display: flex;
}

.flex-wrapper > div:nth-child(4) {
    margin-right: auto;
}
1
2
3
4
5

הדבר היחיד שביצענו הוא הוספת margin-right : auto לאלמנט מספר 4 הדוחף אלמנט זה ואת אלו שאחריו לקצה השמאלי של ה Main Axis.

לסיכום

צפו כי בעתיד נוכל להשתמש בעוד תכונות הקיימות ב Box Alignment Level 3 עבור Flex. אני מניח שנוכל להשתמש בתכונות column-gap ו row-gap הקיימות ב CSS Grid Layout

במדריך זה התעסקנו בעיקר ביישור אלמנטים בקונטיינר לאורך הצירים, אך קיימות תכונות נוספות ל Flex עליהם כדאי לדעת – flex-flow, flex-grow, flex-basis וכדומה.אלו מעבר לסקופ של מדריך זה אך מבטיח לכתוב גם על אלו בהקדם. בין אם במדריך זה או במדריכים נפרדים.

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

 

רועי יוסף
רועי יוסף

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

4תגובות...
  • בן 29 באפריל 2019, 18:05

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

  • אלעד סרוסי 29 באפריל 2019, 18:20

    קודם כל אחלה פוסט תודה רבה! אשמח לדעת איך היית עושה כמו בדוגמא שנתת לגבי space-between רק לגבי שני items כאשר הראשון בהתחלה והשני באמצע. שוב תודה.

    • רועי יוסף 29 באפריל 2019, 18:37

      שמח שאהבת אלעד 🙂

      שאלתך מתייחסת לחלק האחרון של הפוסט. אתה צריך לעשות שימוש ב auto margins:

      <div class="flex-wrapper">
         <div>1</div>
         <div>2</div>
      </div>
      .flex-wrapper {
          display: flex;
      }
      
      .flex-wrapper > div:nth-child(2) {
          margin-right: auto;
          margin-left: auto;
      }

      אבל האלמנט במקרה זה יהיה ממורכז בשטח הריק ולא לרוחב הקונטיינר המלא. אז הפתרון יהיה באמצעות CSS Grid. תן מבט בדוגמה הבאה ב Codepen.

השאירו תגובה

פעימות
Up!