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