הפודקאסט של CSS – 010: Flexbox
תבנית עיצוב שעלולה להיות מסובכת בעיצוב רספונסיבי היא סרגל צד שמוצמד לחלק מהתוכן. במקומות שבהם יש אזור של אזור התצוגה, הדפוס הזה עובד מצוין, אבל הפריסה הקפדנית יכולה להיות בעייתית.
המודל 'פריסת תיבה גמישה' (flexbox) הוא מודל פריסה שמיועד לתוכן חד-ממדי. היא מצטיינת באיסוף של כמה פריטים בגדלים שונים, ובהחזרת הפריסה הטובה ביותר לפריטים האלה.
זהו מודל הפריסה האידיאלי לתבנית של סרגל הצד. בנוסף, אפליקציית Flexbox לא רק תכיל את סרגל הצד ואת התוכן במקום, אלא גם אם לא נותר מספיק מקום. בנוסף, סרגל הצד יישבר לשורה חדשה. במקום לקבוע מידות מחמירות לדפדפן, בעזרת flexbox, אתם יכולים לקבוע גבולות גמישים לרמוז על האופן שבו התוכן יוצג.
מה אפשר לעשות עם פריסה גמישה?
בפריסות ה-Flex יש את התכונות הבאות, שאותן תוכלו לגלות בעזרת המדריך הזה.
- הן יכולות להופיע כשורה או כעמודה.
- הם מצייתים למצב הכתיבה של המסמך.
- כברירת מחדל הן שורות בודדות, אבל אפשר לבקש שהן יגלשו לכמה שורות.
- אפשר לשנות את הסדר של הפריטים בפריסה, רחוק מהסדר שלהם ב-DOM.
- אפשר לחלק את השטח בין הפריטים, כך שהם גדלים וקטנים יותר בהתאם לשטח הזמין אצל ההורה.
- אפשר לפזר רווחים סביב הפריטים ועל קווים גמישים בפריסה ארוזה, באמצעות המאפיינים יישור תיבה.
- ניתן ליישר את הפריטים עצמם בציר הצלב.
הציר הראשי והציר הצלב
המפתח להבנת flexbox הוא הבנת המושג של ציר ראשי וציר מוצלב.
הציר הראשי הוא הציר שהוגדר על ידי הנכס flex-direction
.
אם מדובר ב-row
, הציר הראשי נמצא לאורך השורה,
אם הוא column
, הציר הראשי נמצא לאורך העמודה.
פריטי ה-Flex זזים כקבוצה בציר הראשי. חשוב לזכור: יש לנו כמה דברים, ואנחנו מנסים ליצור עבורם את הפריסה הטובה ביותר כקבוצה.
הציר המוצלב פועל בכיוון השני לכיוון הציר הראשי, כך שאם 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, עליכם להצהיר שאתם רוצים להשתמש בהקשר של עיצוב גמיש ולא בפריסה רגילה של בלוקים ו-inline.
כדי לעשות את זה, משנים את הערך של המאפיין display
ל-flex
.
.container {
display: flex;
}
כמו שלמדתם במדריך הפריסה, תקבלו תיבה ברמת בלוק עם צאצאים של פריטים גמישים. הפריטים הגמישים מתחילים מיד להפגין התנהגות מסוימת של flexbox באמצעות הערכים הראשוניים שלהם.
הערכים הראשוניים הם:
- הפריטים מוצגים כשורה.
- הן לא ארוזות.
- הן לא גדלות כדי למלא את המאגר.
- הן מופיעות בתחילת הקונטיינר.
שליטה בכיוון של פריטים
למרות שלא הוספת עדיין נכס flex-direction
,
הפריטים מוצגים כשורה כי הערך הראשוני של flex-direction
הוא row
.
אם אתם רוצים שורה מסוימת, אין צורך להוסיף את הנכס.
כדי לשנות את הכיוון, מוסיפים את הנכס ואחד מארבעת הערכים:
row
: הפריטים מסודרים כשורה.row-reverse:
הפריטים פרוסים כשורה מהקצה של הקונטיינר הגמיש.column
: הפריטים מסודרים כעמודה.column-reverse
: הפריטים פרוסים כעמודה מהקצה של הקונטיינר הגמיש.
תוכל לנסות את כל הערכים באמצעות קבוצת הפריטים שלנו בהדגמה שלמטה.
היפוך זרימת הפריטים והנגישות
יש להיזהר כשמשתמשים במאפיינים שסדר מחדש את התצוגה החזותית, בניגוד לסידור הפריטים במסמך ה-HTML, כי זה עלול להשפיע לרעה על הנגישות.
הערכים row-reverse
ו-column-reverse
הם דוגמה טובה לכך.
הסידור מחדש מתרחש רק עבור הסדר החזותי, ולא לפי הסדר הלוגי.
חשוב להבין את הסדר הלוגי הזה, כי הסדר הלוגי הוא הסדר שבו קורא המסך מקריא את התוכן, וכל מי שמנווט באמצעות המקלדת יתנהל אחריו.
בסרטון הבא תוכלו לראות איך בפריסת שורה הפוכה, כרטיסיות בין קישורים מתנתקות מאחר שהניווט במקלדת עוקב אחרי ה-DOM ולא אחרי התצוגה החזותית.
כל דבר שיכול לשנות את סדר הפריטים בפיד flexbox או ברשת עלול לגרום לבעיה הזו. לכן, כל שינוי וסידור מחדש צריך לכלול בדיקה יסודית כדי לוודא שחלק מהאנשים לא יתקשו להשתמש באתר.
למידע נוסף:
מצבי כתיבה וכיוון
כברירת מחדל, פריטי ה-Flex פרוסים כשורה. שורה מסוימת רצה בכיוון שבו זזים משפטים במצב הכתיבה ובכיוון הסקריפט. כלומר, אם אתם עובדים בערבית, שיש לה כיוון סקריפט מימין לשמאל (rtl), הפריטים יוצבו בצד ימין. גם סדר הכרטיסיות יתחיל מימין כי זו הדרך שבה ייקראו משפטים בערבית.
אם אתם עובדים במצב כתיבה אנכית, כמו גופנים ביפנית,
שורה תרוץ בצורה אנכית מלמעלה למטה.
כדאי לנסות לשנות את flex-direction
בהדגמה הזו שמשתמשת במצב כתיבה אנכית.
לכן, ההתנהגות של פריטים גמישים כברירת מחדל מקושרת למצב הכתיבה של המסמך. רוב המדריכים נכתבים באנגלית, או במצב כתיבה אופקי אחר, משמאל לימין. כך יהיה קל יותר להניח שפריטים גמישים נמצאים בצד שמאל ופועלים באופן אופקי.
כשצריך להביא בחשבון את הציר הראשי ואת מצב הכתיבה, ייתכן שיהיה קל יותר להבין את העובדה שאנחנו מדברים על התחלה וסיום במקום על החלק העליון, החלק התחתון, השמאלי והימני. לכל ציר יש התחלה וסיום. ההתחלה של הציר הראשי נקראת main-start. אז הפריטים הגמישים שלנו עומדים בהתחלה בדרישות. הסיום של הציר הזה הוא הקצה הראשי. ההתחלה של הציר המוצלב היא cross-start ו-cross-end.
אריזה של פריטים גמישים
הערך הראשוני של המאפיין flex-wrap
הוא nowrap
.
המשמעות היא שאם אין מספיק מקום במאגר, הפריטים יגלשו.
פריטים שמוצגים בהם הערכים הראשוניים יצטמצמו ככל האפשר,
לגודל של min-content
לפני המעבר.
כדי לגרום לאריזת הפריטים, צריך להוסיף flex-wrap: wrap
למכל ה-Flex.
.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
: קיצור להגדרת שני המאפיינים שלמעלה.
המאפיינים המשמשים ליישור ב-flexbox:
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-direction: row
.
הפריט האחרון מגדיר את הגובה של המכל הגמיש.
לפריט הראשון יש המאפיין align-self
עם ערך flex-start
.
כדאי לנסות לשנות את הערך של המאפיין הזה כדי לראות איך הוא נע בתוך השטח שלו בציר הצלב.
המאפיין align-self
חל על פריטים בודדים.
אפשר להחיל את המאפיין align-items
על הקונטיינר הגמיש כדי להגדיר את כל נכסי align-self
הנפרדים כקבוצה.
.container {
display: flex;
align-items: flex-start;
}
בהדגמה הבאה כדאי לנסות לשנות את הערך של align-items
כדי ליישר כקבוצה את כל הפריטים בציר הצלב.
למה אין סיבה להצדיק את עצמו בפלקסבוקס?
פריטי ה-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