מאמר זה ימחיש את השיטה להזמנת פריטי flex ורשת ב-Tailwind CSS.
כיצד להזמין פריטי Flex ו-Grid ב-Tailwind?
כדי להזמין פריטי flex ורשת ב-Tailwind CSS, צור קובץ HTML. לאחר מכן, השתמש בכלי השירות 'order-' וציין את ערך הסדר בתוכנית HTML כדי לשנות את סדר הפריטים הגמישים והרשת. זה מאפשר לפריטים הגמישים להיות מוצגים בסדר שונה ממה שהם מציגים ב-DOM (Document Object Model). כדי להבטיח שינויים, הצג את דף האינטרנט HTML.
עיין בשלבים הניתנים להבנה טובה יותר:
שלב 1: הזמינו פריטי Flex ו-Grid בתוכנית HTML
צור תוכנית HTML והשתמש ב-' סדר-
< גוּף >
< div מעמד = 'flex h-20' >
< div מעמד = 'הזמנה-3 bg-red-500 w-32 m-1' > 1 < / div >
< div מעמד = 'הזמנה אחרונה bg-yellow-500 w-32 m-1' > 2 < / div >
< div מעמד = 'הזמנה ראשונה bg-teal-500 w-32 m-1' > 3 < / div >
< div מעמד = 'הזמנה-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / גוּף >
כאן:
- ' הזמנה-3 ” class קובעת את סדר האלמנט ל-3 והפריט ה-flex ימוקם כפריט השלישי בתוך מיכל ה-flex.
- ' הזמנה-אחרונה ” class מגדיר את סדר האלמנט להיות האחרון והוא יהיה הפריט האחרון בתוך מיכל ה-flex.
- ' סדר ראשון ” class מציינת את סדר האלמנט להיות ראשון והוא ימוקם כפריט הראשון בתוך מיכל ה-flex.
- ' הזמנה-2 ” class קובע את סדר האלמנט ל-2 והוא ימוקם כפריט השני בתוך מיכל ה-flex.
- ' w-32 מחלקה חלה 32 יחידות רוחב על כל פריט גמיש.
- ' m-1 מחלקה מוסיפה שוליים של יחידה אחת סביב כל פריט גמיש.
שלב 2: אימות פלט
הצג את דף האינטרנט של HTML כדי לוודא שפריטי הגמיש והרשת הוזמנו:
ניתן להבחין כי פריטי ה-flex והרשת הוזמנו בהצלחה לפיהם צוינו.
סיכום
כדי להזמין פריטי flex ורשת ב-Tailwind CSS, השתמש ב-' order-