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