קו מוצרי Flexbox

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

מידע נוסף זמין במאמרים הבאים:

• שינוי הסדר של תוכן
• מתנתקים מ-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

סקירה כללית לגבי יישור 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

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

בהדגמה הבאה יש שורה אחת של פריטים 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;
}

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

משאבים

• MDN CSS Flexible Box Layout כולל סדרה של מדריכים מפורטים עם דוגמאות.
• מדריך טריקים בשירות CSS לשימוש ב-Flexbox
• מה קורה כשיוצרים קונטיינר Flexbox Flex
• כל מה שצריך לדעת על יישור ב-Flexbox
• מה הגודל של התיבה הגמישה?
• תרחישים לדוגמה ל-Flexbox
• בדיקה וניפוי באגים בפריסות של CSS Flexbox בכלי הפיתוח ל-Chrome