קו מוצרי Flexbox

הפודקאסט של 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
כברירת מחדל, Flexbox מכניס את הפריטים לשורה ומיישר אותם בהתחלה. כשהאריזה מופעלת, המערכת תמשיך ליצור שורות שילדים יוכלו לזרום בהן.
column
הגדרת כיוון גמיש לעמודה היא דרך מצוינת לערום רכיבים בערימה, אבל זה לא ערך ברירת המחדל.

כברירת מחדל, מיכל גמיש עוטף את הילדים.

true
צריך להפעיל את האריזה.
false
שימוש ב-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

לרשימה המלאה של הערכים ב-MDN

בהדגמה הבאה יש שורה אחת של פריטים גמישים עם 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
כן, אנחנו רוצים ליישר אותן אנכית ל'ראש הדף' או ל'התחלה', ופעולה זו מסירה את ערך ברירת המחדל של מתיחה ובמקום זאת משתמשת בגובה התוכן.

מקורות מידע