הפודקאסט של CSS – 010: Flexbox
דפוס עיצוב שעשוי להיות מורכב בעיצוב רספונסיבי הוא סרגל צד שיושב עם חלק תוכן. כאשר יש מרחב של אזור התצוגה, הדפוס הזה עובד מצוין, אבל המרחב הזה דחוס, שהפריסה הנוקשת עלולה להיות בעייתית.
מודל פריסת התיבה הגמישה (Flexiblebox) הוא מודל פריסה שמיועד לתוכן חד-ממדי. הוא מצטיין באיסוף של כמה פריטים בגדלים שונים, והחזרת הפריסה הטובה ביותר של הפריטים האלה.
זהו מודל הפריסה אידיאלי לתבנית של סרגל הצד. Flexbox לא רק עוזר לארגן את סרגל הצד ואת התוכן, אך כאשר לא נשאר מספיק מקום, סרגל הצד יחובר לשורה חדשה. במקום להגדיר מידות נוקשות למעקב של הדפדפן, עם Flexbox, במקום זאת, תוכלו להציב גבולות גמישים כדי לרמוז על האופן שבו התוכן יוצג.
מה אפשר לעשות עם פריסה גמישה?
לפריסות גמישה יש את התכונות הבאות, שאפשר ללמוד עליהם במדריך הזה.
- אפשר להציג אותן כשורה או כעמודה.
- הם פועלים בהתאם למצב הכתיבה של המסמך.
- כברירת מחדל, הם שורה אחת, אבל אפשר לבקש ממנו להתפרס על כמה שורות.
- ניתן לשנות את הסדר של הפריטים בפריסה מבחינה חזותית, רחוק מהסדר שלהם ב-DOM.
- אפשר לחלק את הרווח בין הפריטים, כך שהם גדלים וקטנים בהתאם למקום שיש להורים שלהם.
- אפשר לחלק את הרווח סביב הפריטים והקווים גמישה בפריסה ארוזה, באמצעות המאפיינים 'יישור תיבה'.
- ניתן ליישר את הפריטים עצמם על ציר הצלב.
הציר הראשי והציר הצלב
המפתח להבנת ה-Flexbox הוא הבנת המושג 'ציר ראשי' ו'ציר חוצה'.
הציר הראשי הוא הציר שמוגדר בנכס flex-direction
.
אם המיקום הוא row
, הציר הראשי שלך נמצא לאורך השורה,
אם התאריך הוא column
, הציר הראשי שלך יהיה לאורך העמודה.
הפריטים משתנים כקבוצה על הציר הראשי. זכרו: יש לנו כמה דברים ואנחנו מנסים להשיג את הפריסה הטובה ביותר עבורם כקבוצה.
הציר הצלב רץ בכיוון ההפוך לציר הראשי,
כך שאם הערך של flex-direction
הוא row
, ציר הציר פועל לאורך העמודה.
ניתן לבצע שתי פעולות בציר הצלב.
אפשר להזיז את הפריטים בנפרד או כקבוצה, כך שהם יתייצבו אחד אל השני
מאגר תגים. כמו כן, אם יש לכם קווים גמישים,
אפשר להתייחס לשורות האלה כקבוצה כדי לקבוע איך יוקצה הרווח לשורות האלה.
תראו איך כל זה עובד בפועל במדריך הזה,
בינתיים, רק חשוב לזכור שהציר הראשי עוקב אחרי flex-direction
.
יצירת מאגר גמיש
בואו נראה איך Flexbox פועל: לוקחים קבוצה של פריטים בגדלים שונים ומשתמשים ב-Flexbox אותן.
<div class="container" id="container">
<div>One</div>
<div>Item two</div>
<div>The item we will refer to as three</div>
</div>
כדי להשתמש ב-Flexbox, אתם צריכים להצהיר שאתם רוצים להשתמש בהקשר של עיצוב גמיש ולא בפורמט רגיל
בלוק ופריסה בתוך השורה.
כדי לעשות זאת, משנים את הערך של המאפיין display
ל-flex
.
.container {
display: flex;
}
כמו שלמדתם במדריך הפריסה, תופיע תיבה ברמת החסימה, עם ילדים בעיצוב גמיש. הפריטים הגמישים מתחילים מיד בהתנהגות של Flexbox, תוך שימוש בערכים הראשוניים שלהם.
הערכים הראשוניים מציינים את הדברים הבאים:
- הפריטים מוצגים כשורה.
- הם לא גלישה.
- הם לא צומחים וממלאים את המכל.
- הם מופיעים בתחילת המאגר.
שליטה בכיוון של הפריטים
למרות שעדיין לא הוספת נכס flex-direction
,
הפריטים מוצגים כשורה כי הערך הראשוני של flex-direction
הוא row
.
אם רוצים להוסיף שורה, אין צורך להוסיף את הנכס.
כדי לשנות את הכיוון, מוסיפים את המאפיין ואחד מארבעת הערכים:
row
: הפריטים מסודרים כשורה.row-reverse:
הפריטים פרוסים כשורה מהקצה של המאגר הגמיש.column
: הפריטים פרוסים כעמודה.column-reverse
: הפריטים פרוסים כעמודה בקצה המאגר הגמיש.
אפשר לנסות את כל הערכים באמצעות קבוצת הפריטים שלנו בהדגמה שלמטה.
להפוך את רצף הפריטים והנגישות
צריך להיזהר כשמשתמשים במאפיינים שמסדרים מחדש את התצוגה החזותית
רחוק מהסידור של הפריטים במסמך ה-HTML,
כי זה עלול להשפיע לרעה על הנגישות.
הערכים row-reverse
ו-column-reverse
הם דוגמה טובה לכך.
הסדר מתבצע רק לפי הסדר החזותי, ולא לפי הסדר הלוגי.
חשוב להבין את זה, כי הסדר הלוגי הוא הסדר שבו קורא המסך יקריא
את התוכן,
וכל מי שמנווט באמצעות המקלדת ילך אחריו.
תוכלו לראות בסרטון הבא איך פריסת שורות הפוכה: הקשה על Tab בין קישורים מתנתקת כי הניווט באמצעות המקלדת עוקב אחרי ה-DOM ולא מסך.
כל דבר שיכול לשנות את סדר הפריטים ב-Flexbox או ברשת יכול לגרום לבעיה הזו. לכן, כל סידור מחדש צריך לכלול בדיקה יסודית כדי לוודא שלא תהיה לכך השפעה על האתר שלכם. קשה לשימוש עבור אנשים מסוימים.
מידע נוסף זמין במאמרים הבאים:
מצבי כתיבה וכיוון כתיבה
כברירת מחדל, הפריטים בפורמט Flex בפריסה כשורה. השורה פועלת בכיוון שבו המשפטים עוברים למצב הכתיבה ובכיוון הסקריפט. כלומר, אם אתם עובדים בערבית, שיש לו כיוון סקריפט מימין לשמאל (rtl), הפריטים יופיעו בצד ימין. גם סדר הכרטיסיות יתחיל מימין כי כך קוראים משפטים בערבית.
אם אתם עובדים במצב כתיבה אנכית,
כמו גופנים ביפנית, השורה תפעל אנכית, מלמעלה למטה.
כדאי לנסות לשנות את flex-direction
בהדגמה הזו שמשתמש במצב כתיבה אנכית.
לכן, אופן הפעולה של פריטים גמישים כברירת מחדל מקושר למצב הכתיבה של המסמך. רוב המדריכים נכתבים באנגלית או בשפה אופקית אחרת, במצב כתיבה משמאל לימין. כך יהיה קל להניח שהפריטים הגמישים נמצאים בצד שמאל והם פועלים לרוחב.
עם ציר הראשי והציר המוצלב, וגם מצב הכתיבה שצריך לקחת בחשבון, את העובדה שאנחנו מדברים על התחלה וסיום ולא על 'ראש הדף', 'למטה', 'שמאלה' ו'ימין' יכול להיות שיהיה קל יותר להבין את Flexbox. לכל ציר יש התחלה וסוף. ההתחלה של הציר הראשי נקראת התחלה ראשית. לכן הפריטים הגמישים שלנו משתלבים בהתחלה מההתחלה. קצה הציר הזה הוא קצה ראשי. ההתחלה של ציר הצלב היא התחלה מחדש והסוף של קצה חוצה.
אריזת פריטים גמישים
הערך הראשוני של המאפיין flex-wrap
הוא nowrap
.
כלומר, אם אין מספיק מקום בקונטיינר, הפריטים יגלשו.
פריטים שמוצגים באמצעות הערכים הראשוניים יצומצמו עד כמה שאפשר,
עד לגודל min-content
לפני שהגלישה מתבצעת.
כדי לגרום לאריזה של הפריטים, מוסיפים flex-wrap: wrap
למאגר הגמיש.
.container {
display: flex;
flex-wrap: wrap;
}
כשמכל גמיש עוטף אותו, נוצרים כמה קווים גמישים. מבחינת התפלגות החלל, כל שורה פועלת כמו מיכל גמיש חדש. לכן אם אתם כוללים שורות, אין אפשרות להציג משהו בשורה 2 שיתאים למשהו שנמצא מעליו בשורה 1. זו המשמעות של כאשר Flexbox הוא חד-ממדי. אפשר לשלוט ביישור בציר אחד, בשורה או בעמודה, לא את שתיהן ביחד, כפי שאנחנו יכולים לעשות ברשת.
הקיצור של הזרימה הגמישה
אפשר להגדיר את המאפיינים flex-direction
ו-flex-wrap
באמצעות הקיצור flex-flow
.
לדוגמה, כדי להגדיר את flex-direction
לערך column
ולאפשר גלישה של פריטים:
.container {
display: flex;
flex-flow: column wrap;
}
שליטה במרחב בתוך פריטים גמישה
בהנחה שבמאגר שלנו יש יותר מקום מהנדרש כדי להציג את הפריטים,
הפריטים מופיעים בהתחלה ולא גדלים כדי למלא את השטח.
הם מפסיקים לצמוח בגודל התוכן המקסימלי שלהם.
הסיבה לכך היא שהערך הראשוני של המאפיינים flex-
הוא:
flex-grow: 0
: פריטים לא גדלים.flex-shrink: 1
: פריטים יכולים להתכווץ פחות מ-flex-basis
.flex-basis: auto
: גודל הבסיס של הפריטים הואauto
.
אפשר לייצג אותו בערך של מילת המפתח flex: initial
.
מאפיין הקיצור flex
,
או הידיים הארוכות של flex-grow
, flex-shrink
ו-flex-basis
חלות על הצאצאים של
מאגר גמיש.
כדי לגרום לפריטים לגדול,
ו-flex:auto
מאפשר לפריטים גדולים להיות גדולים יותר מפריטים קטנים.
אפשר לנסות לעשות זאת באמצעות ההדגמה שלמעלה.
הפעולה הזו מגדירה את המאפיינים כך:
flex-grow: 1
: פריטים יכולים להיות גדולים יותר מ-flex-basis
שלהם.flex-shrink: 1
: פריטים יכולים להתכווץ פחות מ-flex-basis
.flex-basis: auto
: גודל הבסיס של הפריטים הואauto
.
אם מזינים flex: auto
הפריטים יהיו בגדלים שונים,
כי הרווח המשותף בין הפריטים משותף אחרי שכל פריט מסודר
גודל מקסימלי של תוכן.
כך פריט גדול יתפוס יותר מקום.
כדי לאלץ את כל הפריטים להיות בגודל עקבי ולתעלם מגודל השינוי של התוכן
flex:auto
אל flex: 1
בהדגמה.
הפעולה הזו פותחת אל:
flex-grow: 1
: פריטים יכולים להיות גדולים יותר מ-flex-basis
שלהם.flex-shrink: 1
: פריטים יכולים להתכווץ פחות מ-flex-basis
.flex-basis: 0
: גודל הבסיס של הפריטים הוא0
.
שימוש ב-flex: 1
אומר שלכל הפריטים יש גודל אפס.
לכן כל השטח במכל הגמיש זמין להפצה.
מכיוון שלכל הפריטים יש גורם flex-grow
של 1
, כולם גדלים באופן שווה ונפח האחסון מתחלק באופן שווה.
מתן אפשרות לפריטים גדלים בקצב שונה
לא חובה לתת לכל הפריטים גורם flex-grow
של 1
.
אפשר להגדיר לפריטים הגמישים flex-grow
גורמים שונים.
בהדגמה שמתחת לפריט הראשון יש flex: 1
, הפריט השני flex: 2
והflex: 3
השלישי.
כשהפריטים האלה גדלים החל מ-0
, נפח האחסון הזמין בקונטיינר הגמיש משותף לשישה.
חלק אחד ניתן לפריט הראשון,
בשני חלקים,
משלושה חלקים לשלישי.
אפשר לבצע את אותה הפעולה מ-flex-basis
של auto
, אבל צריך לציין את השלושה
ערכים.
הערך הראשון הוא flex-grow
,
flex-shrink
השני,
וה-flex-basis
השלישי.
.item1 {
flex: 1 1 auto;
}
.item2 {
flex: 2 1 auto;
}
זהו תרחיש פחות נפוץ כי הוא הסיבה לשימוש ב-flex-basis
של auto
היא לאפשר לדפדפן להבין את התפלגות החלל.
אם רוצים לגרום לפריט לגדול מעט יותר מכפי שהאלגוריתם קובע, עם זאת, ייתכן
שימושי.
סידור מחדש של הפריטים הגמישים
אפשר לשנות את הסדר של הפריטים במאגר הגמישה באמצעות המאפיין order
.
המאפיין הזה מאפשר את סדר הפריטים בקבוצות סידוריות.
הפריטים מסודרים לפי הכיוון שהוגדר על ידי flex-direction
,
הערכים הנמוכים ביותר תחילה.
אם יש יותר מפריט אחד עם אותו ערך, הוא יוצג עם שאר הפריטים עם הערך הזה.
הדוגמה הבאה ממחישה את הסדר הזה.
בדיקת ההבנה
בוחנים את הידע שלכם ב-Flexbox
ערך ברירת המחדל הוא flex-direction
row
column
כברירת מחדל, מיכל גמיש עוטף ילדים.
flex-wrap: wrap
עם display: flex
לגלישת ילדיםפריט צאצא גמיש נראה מעוך, איזה מאפיין גמיש עוזר לצמצם את הבעיה?
flex-grow
flex-shrink
flex-basis
סקירה כללית לגבי יישור Flexbox
Flexbox הביא איתו קבוצת מאפיינים ליישור פריטים ולחלוקת מקום בין פריטים. הנכסים האלה היו כל כך שימושיים, שמאז הועברו למפרט משלהם, הם יוצגו גם בפריסת רשת. כאן אפשר לראות איך הם פועלים כשמשתמשים ב-Flexbox.
אפשר לחלק את קבוצת הנכסים לשתי קבוצות. מאפיינים של התפלגות מרחב ומאפיינים ליישור. המאפיינים שחולקים שטח הם:
justify-content
: התפלגות השטח על הציר הראשי.align-content
: התפלגות הרווח על ציר הצלב.place-content
: קיצור דרך להגדרה של שני הנכסים שלמעלה.
המאפיינים שמשמשים ליישור ב-Flexiblebox:
align-self
: מיישרת פריט יחיד על ציר האיקס.align-items
: מיישרת את כל הפריטים כקבוצה על הציר האופקי.
אם עובדים על הציר הראשי, המאפיינים מתחילים ב-justify-
.
בצירים השונים הן מתחילים ב-align-
.
חלוקת השטח על הציר הראשי
עם קוד ה-HTML שהיה בשימוש קודם, הפריטים הגמישים מסודרים כשורה, ונשאר רווח על הציר הראשי.
הפריטים לא גדולים מספיק כדי למלא את כל המכל הגמיש.
הפריטים מופיעים בתחילת המאגר הגמיש כי הערך הראשוני של justify-content
flex-start
.
הפריטים מופיעים בהתחלה ורווחים מיותרים בסוף.
מוסיפים את המאפיין justify-content
לקונטיינר הגמיש,
נותנים לו את הערך flex-end
,
והפריטים מופיעים בסוף המכל, והמקום הפנוי ממוקם בתחילת המכל.
.container {
display: flex;
justify-content: flex-end;
}
אפשר גם לחלק את הרווח בין הפריטים באמצעות justify-content: space-between
.
כדאי לנסות כמה מהערכים שבהדגמה ואפשר לעיין ב-MDN כדי לראות את הרשימה המלאה של הערכים האפשריים.
עם flex-direction: column
אם שינית את flex-direction
ל-column
, justify-content
יפעל בתאריך
העמודה.
כדי שיהיה מקום פנוי במכל במהלך העבודה כעמודה, צריך לתת למכל
height
או block-size
.
אחרת לא יהיה לכם מקום פנוי להפצה.
אפשר לנסות את הערכים השונים, הפעם בפריסת עמודות של Flexbox.
חלוקת רווח בין קווים גמישים
עם מיכל גמיש ארוז, יכול להיות שיהיה מקום לפזר על הציר האופקי.
במקרה הזה אפשר להשתמש במאפיין align-content
עם אותם הערכים כמו justify-content
.
בניגוד למדיניות justify-content
שמבצעת התאמה של פריטים ל-flex-start
כברירת מחדל,
הערך הראשוני של align-content
הוא stretch
.
כדי לשנות את התנהגות ברירת המחדל, מוסיפים את המאפיין align-content
לקונטיינר הגמיש.
.container {
align-content: center;
}
כדאי לנסות את זה בהדגמה.
בדוגמה יש שורות קשורות של פריטים גמישים,
ובמכל יש block-size
כדי שיהיה לנו מקום פנוי.
הקיצור של place-content
כדי להגדיר גם את justify-content
וגם את align-content
, אפשר להשתמש בפונקציה place-content
עם הגדרה אחת
או שני ערכים.
ייעשה שימוש בערך יחיד לשני הצירים,
אם מציינים – השיטה הראשונה משמשת גם את align-content
וגם את השנייה בשביל justify-content
.
.container {
place-content: space-between;
/* sets both to space-between */
}
.container {
place-content: center flex-end;
/* wrapped lines on the cross axis are centered,
on the main axis items are aligned to the end of the flex container */
}
יישור פריטים בציר הצלב
בציר הצלב אפשר גם ליישר את הפריטים בתוך הקו הגמיש באמצעות align-items
ו-align-self
.
השטח הזמין ליישור הזה תלוי בגובה של המכל הגמיש,
או קו גמיש במקרה של סט עטוף של פריטים.
הערך הראשוני של align-self
הוא stretch
,
זו הסיבה לכך שפריטים בשורה נמתחים לגובה של הפריט הגבוה ביותר כברירת מחדל.
כדי לשנות את זה, צריך להוסיף את המאפיין align-self
לכל אחד מהפריטים הזמינים.
.container {
display: flex;
}
.item1 {
align-self: flex-start;
}
משתמשים בערכים הבאים כדי ליישר את הפריט:
flex-start
flex-end
center
stretch
baseline
בהדגמה הבאה יש שורה אחת של פריטים Flex עם flex-direction: row
.
הפריט האחרון מגדיר את הגובה של מיכל הגמיש.
לפריט הראשון יש את המאפיין align-self
עם הערך flex-start
.
נסו לשנות את הערך במאפיין הזה כדי לראות איך הוא נע בתוך השטח שלו בציר הצלב.
המאפיין align-self
חל על פריטים בודדים.
אפשר להחיל את המאפיין align-items
על קונטיינר הגמיש
כדי להגדיר את כל הנכסים הנפרדים של align-self
כקבוצה.
.container {
display: flex;
align-items: flex-start;
}
בהדגמה הבאה אפשר לנסות לשנות את הערך של align-items
כדי ליישר קו בין כל הפריטים שבצלב
כקבוצה.
למה אין הצדקה עצמית ב-Flexbox?
פריטים מסוג Flex פועלים כקבוצה בציר הראשי. לכן אין רעיון של פיצול פריט בודד מתוך הקבוצה הזו.
בפריסת רשת, המאפיינים justify-self
ו-justify-items
פועלים על הציר המוטבע
כדי להתאים פריטים בציר הזה בתוך אזור הרשת שלהם.
בגלל האופן שבו פריסות גמישות מתייחסים לפריטים כקבוצה,
מאפיינים אלה לא מוטמעים בהקשר גמיש.
כדאי לדעת ש-Flexbox מתאים מאוד לשימוש עם שוליים אוטומטיים.
אם אתם צריכים לפצל פריט אחד מקבוצה,
או להפריד את הקבוצה לשתי קבוצות,
אפשר להחיל שולי רווח לשם כך.
בדוגמה שמתחת לפריט האחרון, יש שוליים שמאליים של auto
.
השוליים האוטומטיים סופגים את כל השטח בכיוון שבו הם מוחלים.
כלומר, הוא דוחף את הפריט ימינה, ובכך מפצל את הקבוצות.
איך למרכז פריט באופן אנכי ואופקי
אפשר להשתמש במאפייני היישור כדי למרכז פריט בתוך תיבה אחרת.
המאפיין justify-content
מיישר את הפריט בציר הראשי,
שזו שורה. המאפיין align-items
בציר הצלב.
.container {
width: 400px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
בדיקת ההבנה
בוחנים את הידע שלכם ב-Flexbox
.container { display: flex; direction: ltr; }
כדי ליישר אנכית עם Flexbox, משתמשים בפקודה:
.container { display: flex; direction: ltr; }
כדי ליישר קו אופקי עם Flexbox, משתמשים בפקודה:
.container { display: flex; direction: ltr; }
כברירת מחדל, פריטים גמישה מותאמים ל-stretch
. אם רוצים לראות תוכן
הגודל שמשמש לפריטי צאצא, באיזה מהסגנונות הבאים היית רוצה להשתמש?
justify-content: flex-start
align-content: start
content
מיישר קווים גמישים, לא יישור של פריטי צאצא.height: auto
align-items: flex-start