תמיכה ביישור תוכן בפריסות של בלוקים וטבלאות

בגרסה 123 של Chrome אפשר להשתמש בנכס align-content מ-CSS Box Alignment בפריסות של בלוקים וטבלאות. כך תוכלו ליישר את הכיוון של הבלוק בלי ליצור פריסה גמישה או פריסה של רשת. עם זאת, יכול להיות שתצטרכו לעדכן את קובץ ה-CSS אם השתמשתם ב-align-content מחוץ לשיטות הפריסה האלה, כי הוא ייכנס עכשיו לתוקף.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 125.
  • Safari: 17.4.

align-content בפריסות גמישות ובפריסות רשת

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

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

מרכוז פריט באופן אנכי

אפשר להשתמש ב-align-content במיוחד כדי למרכז פריט אנכית בתוך מאגר. כדי לעשות זאת, משתמשים ב-display: flex יחד עם align-content: center. הפעולה הזו הופכת את הפריט לפריט גמישות, וגם התנהגות ברירת המחדל של פריט גמישות נכנסת לתוקף. בדוגמה הבאה הכותרת ממוקמת במרכז לאורך באמצעות align-content: center, וכתוצאה מכך הפריט מתכווץ כך שיתאים לתוכן. לכן צריך להחיל את flex-grow: 1 על הפריט.

הנכס align-content ממרכז את הכותרת אנכית בתוך קונטיינר גמיש.

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

הנכס align-content ממרכז את הכותרת אנכית בתוך מאגר בלוקים (נדרש Chrome 123 או Safari 17.4 ואילך).

בדיקה של תמיכה ב-align-content בפריסות של בלוקים

לצערנו, אי אפשר לבדוק אם יש תמיכה ב-align-content בפריסה של בלוקים. מאחר ש-align-content נתמך כבר זמן רב בפריסה של גמישות ותצוגת רשת, שימוש בשאילתות של תכונות עם @supports תמיד יחזיר את הערך true. זהו אותו מצב שקרה עם המאפיין gap ב-flexbox. קבוצת העבודה של CSS בודקת פתרון להטמעות חלקיות כאלה.

בדיקת האתרים כדי לזהות התאמה לא צפויה

המאפיין align-content מוגדר כבר שנים רבות במפרט כמאפיין לעבודה על פריסות של בלוקים. מאחר שאף דפדפן לא תומך ב-align-content מחוץ להקשרים האלה, הוא לא עשה כלום. עם זאת, אם הוספתם את הנכס למשהו שאינו מאגר גמישות או רשת, הוא יחל להשפיע החל מגרסה 123 של Chrome. אם אתם חושדים שזה המצב, חפשו ב-CSS שימוש ב-align-content והשתמשו בגרסת הבטא כדי לבדוק את האתרים והאפליקציות שלכם.