Flexbox או flex container היא פריסה המאפשרת למשתמשים ליישר ולהפיץ אלמנטים בתוך מיכל. Tailwind CSS מציעה שיעורי עזר שונים ליצירה ולעבודה עם flexbox. מיכל פלקס ברמת קופסה הוא מיכל פלקס שמתנהג/פועל כמו אלמנט ברמת בלוק ויוצר בלוק. הוא תופס את כל הרוחב של אלמנט האב שלו ויוצר קו חדש אחרי עצמו.
כתיבה זו תדגים את השיטה ליצירת מיכל גמיש ברמת הבלוק ב-Tailwind.
כיצד ליצור/ליצור מיכל Flex-Level Flex ב-Tailwind?
כדי ליצור מיכל גמיש מסוים ברמת הבלוק ב-Tailwind, צור מבנה HTML. לאחר מכן, הוסף את ' לְהַגמִישׁ ” מחלקת השירות עם ה-
תחביר
< div מעמד = 'להגמיש...' >
...
div >
קוד
< גוּף >
< div מעמד = 'flex gap-2 m-2 border-2 border-black' >
< div מעמד = 'bg-yellow-500 p-4' > פריט ראשון div >
< div מעמד = 'bg-yellow-500 p-4' > פריט שני div >
< div מעמד = 'bg-yellow-500 p-4' > פריט שלישי div >
div >
גוּף >
כאן, במיכל האב
-
- ' לְהַגמִישׁ מחלקה משמשת ליצירת מיכל גמיש ברמת הבלוק.
- ' פער-2 'הכיתה מוסיפה 2 יחידות מרווח בין רכיבי הצאצא של flex.
- ' m-2 מחלקה מוסיפה 2 יחידות שוליים לכל הצדדים של המכולה.
- ' גבול-2 ” מחלקה מוסיפה את הגבול למיכל עם 2 יחידות רוחב.
- ' גבול-שחור מחלקה מגדירה את צבע הגבול לשחור.
באלמנטים גמישים של הילד:
-
- ' bg-yellow-500 הכיתה מחילה צבע צהוב על הרקע של הפריט הגמיש.
- ' p-4 ” הכיתה מוסיפה ריפוד של 4 יחידות לכל הצדדים של הפריטים הגמישים.
תְפוּקָה
בפלט לעיל, הגבול מייצג שהמכולה היא מיכל גמיש ברמת הבלוק, שתופס את כל רוחב האלמנט האב שלו (דפדפן).
לחלופין, המשתמש יכול להבטיח זאת על ידי בדיקת רכיב מיכל הגמיש בדף האינטרנט:
הפלט לעיל מציין שהמיכל הוא מיכל גמיש ברמת בלוק.
סיכום:
כדי ליצור מיכל גמיש ברמת בלוק ב-Tailwind, יש צורך להוסיף את ' לְהַגמִישׁ ” מחלקת השירות עם המיכל המסוים וציין את רכיבי הצאצא שלו. משתמשים יכולים להגדיר ולשנות פריטים להגמיש בהתאם לצרכים שלהם. לאימות, הוסף את הגבול למיכל והצג את דף האינטרנט או בדוק את הרכיב הזה בדף האינטרנט. מאמר זה הסביר את השיטה ליצירת מיכל גמיש ברמת בלוק ב-Tailwind.