Tailwind CSS מציע מגוון ' align-items 'כלי עזר לשליטה במיקום של פריטי flex ורשת לאורך הציר הצלב של המכולה. מחלקות שירות אלה כוללות 'התחלה של פריטים', 'מרכז פריטים', 'סוף פריטים', 'קו בסיס של פריטים' ו'מתיחה של פריטים'. יתרה מכך, משתמשים יכולים גם להשתמש בנקודות הפסיקה ושאילתות המדיה בכלי השירות 'items-
מאמר זה ידגים את השיטה להחלת נקודות שבירה ושאילתות מדיה על כלי השירות 'align-items' ב-Tailwind.
כיצד להחיל נקודות שבירה ושאילתות מדיה עם 'יישור-פריטים' ב-Tailwind?
כדי להחיל נקודות עצירה ושאילתות מדיה רצויות בכלי שירות 'הצדקת תוכן' ב-Tailwind, צור מבנה HTML. לאחר מכן, הגדר את הערך הספציפי ל' פריטים-
דוגמא
בדוגמה זו, ניצור מיכל flex עם המאפיין 'items-start'. נשתמש ב' md ' נקודת שבירה עם ' מרכז הפריטים 'תועלת ו' lg ' נקודת שבירה עם ' פריטים-סוף כלי השירות ב- תְפוּקָה להחלת נקודות שבירה ושאילתות מדיה עם כלי עזר 'align-items' ב-Tailwind, הגדר את הערך הרצוי ל-' פריטים-
< גוּף >
< div מעמד = 'flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div מעמד = 'bg-pink-600 py-4 w-40' > 1 div >
< div מעמד = 'bg-pink-600 py-12 w-40' > 2 div >
< div מעמד = 'bg-pink-600 py-8 w-40' > 3 div >
div >
גוּף >
כאן:
הפלט לעיל מראה שהיישור האנכי של הפריטים הגמישים משתנה ככל שגודל המסך משתנה. זה מצביע על כך שנקודות השבירה ושאילתות המדיה שצוינו יושמו ביעילות עם כלי השירות 'align-items'. סיכום