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