ב-Tailwind CSS, ה' רווח בין 'כלי עזר משמשים לשליטה על הרווח בין רכיבי צאצא של מיכלי flex או רשת. הוא מציע מחלקות שונות, כגון 'רווח-x-
מדריך זה ידגים את שיטת השימוש בערך רווח שלילי ב-Tailwind.
כיצד להשתמש בערך רווח שלילי ברוח הגבית?
כדי להשתמש בערך רווח שלילי ב-Tailwind, ראשית, צור מבנה HTML. לאחר מכן, השתמש במקף ' – ' עם מחלקות השירות הרצויות 'רווח בין' כדי להמיר אותו לערך שלילי. ה ' -space-x-
בואו נעבור על הדוגמאות שלהלן כדי להבין זאת טוב יותר.
דוגמה 1: החל מרווח אופקי שלילי בין אלמנטים
בדוגמה זו, יש לנו מיכל flex עם כמה אלמנטים צאצאים בשורה. נשתמש ב' -רווח-x-8 ' מחלקה כדי להחיל את המרווח האופקי השלילי בין רכיבי flex:
< גוּף >< div מעמד = 'flex -space-x-8 m-10 h-20 w-max' >
< div מעמד = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div מעמד = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div מעמד = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div מעמד = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div מעמד = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div מעמד = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
גוּף >
כאן, באלמנט ההורים
-
- ' לְהַגמִישׁ כיתה יוצרת פריסה גמישה.
- ' -רווח-x-8 מחלקה מוסיפה 8 יחידות של מרווח אופקי שלילי בין אלמנטים גמישים בתוך מיכל.
- ' m-10 ” מחלקה מוסיפה מרווח של 10 יחידות לכל הצדדים של המיכל.
- ' h-20 ” מחלקה מגדירה את גובה המכולה ל-20 יחידות.
- ' w-max מחלקה מגדירה את רוחב המיכל לרוחב התוכן המרבי שלו.
ברכיבי
-
- ' bg-teal-500 מחלקה מגדירה את הרקע של רכיבי flex ל-teal.
- ' w-20 מחלקה מגדירה את הרוחב של כל פריט גמיש ל-20 יחידות.
- ' p-5 הכיתה מוסיפה 5 יחידות ריפוד לכל הצדדים של כל פריט גמיש.
- ' גבול-2 מחלקה מגדירה את רוחב הגבול של המיכל ל-2 יחידות.
- ' border-teal-800 הכיתה מחילה צבע צהבהב על הגבול.
תְפוּקָה
הפלט לעיל מראה שהאלמנטים הגמישים חופפים. זה מציין שערך הרווח האופקי השלילי הוחל בהצלחה.
דוגמה 2: החל מרווח אנכי שלילי בין אלמנטים
בדוגמה זו, יש לנו מיכל flex עם כמה אלמנטים צאצאים בעמודה. נשתמש ב' -space-y-7 ' מחלקה כדי להחיל את המרווח האנכי השלילי בין רכיבי flex:
< גוּף >< div מעמד = 'flex flex-col -space-y-7 m-10 text-center' >
< div מעמד = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div מעמד = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div מעמד = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div מעמד = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
גוּף >
כאן:
-
- ' לְהַגמִישׁ כיתה יוצרת פריסה גמישה.
- ' flex-col מחלקה מיישרת את הפריטים הגמישים בכיוון אנכי.
- ' -space-y-5 מחלקה מוסיפה 7 יחידות של מרווח אנכי שלילי בין אלמנטים גמישים בתוך מיכל.
- ' m-10 ” מחלקה מוסיפה מרווח של 10 יחידות לכל הצדדים של המיכל.
- ' מרכז טקסט ' מחלקה מיישרת את הטקסט של המכולה למרכז.
תְפוּקָה
ניתן לראות שהאלמנטים הגמישים חופפים. זה מציין שערך הרווח האנכי השלילי הוחל בהצלחה.
סיכום
כדי להשתמש בערך רווח שלילי ב-Tailwind, השתמש ב-' -space-x-