Tailwind CSS מספק ' align-items 'כלי עזר לשליטה במיקום של פריטי flex ורשת לאורך הציר הצלב של המכולה. יש לו מחלקות שירות שונות, כגון 'התחלה פריטים', 'מרכז פריטים', 'סוף פריטים', 'פריטים-בסיס' וכו'. יתר על כן, משתמשים יכולים גם להשתמש במאפיין הרחף עם 'פריטים-
מאמר זה ידגים את השיטה להחלת הרחף על כלי עזר של align-items ב- Tailwind CSS.
כיצד להחיל Hover על כלי שירות 'align-items' ב-Tailwind?
כדי להחיל את הרחף על כלי השירות 'align-items' ב-Tailwind, צור מבנה HTML והוסף את ' לְרַחֵף ' מחלקת שירות עם הרצוי ' פריטים-
תחביר
< אֵלֵמֶנט מעמד = 'hover:items-
החלף את
דוגמא
בדוגמה זו, ניצור מיכל flex עם המאפיין 'items-start'. לאחר מכן, נשתמש ב' hover:items-center 'כיתה ב' תְפוּקָה להחלת אפקט הריחוף על כלי השירות 'align-items' ב-Tailwind, השתמש ב-' לְרַחֵף ' מחלקת שירות עם ' המסוים ' פריטים-
< גוּף >
< div מעמד = 'flex items-start hover:items-center 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 >
גוּף >
כאן:
מדף האינטרנט לעיל, ניתן לראות שהיישור של הפריטים הגמישים משתנה לאורך הציר הצולב של המיכל בעת ריחוף. סיכום