מאמר זה יסביר את השיטה למניעת עטיפה של פריטי flex ב- Tailwind CSS.
כיצד למנוע/לעצור פריטים מתעטפים ברוח גב?
כדי להפסיק את גלישת פריטי flex ב-Tailwind, צור קובץ HTML. לאחר מכן, השתמש בכלי השירות 'flex-nowrap' עם מיכל ה-flex בתוכנית ה-HTML כדי למנוע פריטי flex מלעטוף. לאחר מכן, ודא את השינויים על ידי צפייה בדף האינטרנט HTML.
נסה את השלבים המוזכרים להלן, כדי להבין אותם טוב יותר:
שלב 1: מנע מפריטים להגמיש לעטוף בתוכנית HTML
צור תוכנית HTML והשתמש ב-' flex-nowrap ' כלי עזר עם מיכל הגמיש הרצוי למניעת עיטוף של פריטים גמישים:
< גוּף >
< div מעמד = 'flex flex-nwrap h-40' >
< div מעמד = 'בסיס-1/4 bg-red-500 m-1' > 1 < / div >
< div מעמד = 'בסיס-1/3 bg-yellow-500 m-1' > 2 < / div >
< div מעמד = 'בסיס-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / גוּף >
כאן:
- ' לְהַגמִישׁ 'מחלקה מאפשרת פריסת flexbox ב- אלמנט ומאפשר לארגן וליישר את רכיבי הצאצא.
- ' flex-nowrap ” class מציינת שהפריטים הגמישים לא צריכים לעטוף על גבי שורות מרובות ולשמור את כל הפריטים הגמישים בשורה אחת.
- ה ' בסיס-1/4 ', ' בסיס-1/3 ', ו' בסיס-1/2 'שיעורים קובעים את הפנימיות
הרוחב של ל-25%, 33.33% ו-50% ממרכיבי האב שלהם, בהתאמה.
שלב 2: אימות פלט
כדי להבטיח שהפריטים הגמישים לא עטפו, הצג את דף האינטרנט של HTML:
בדף האינטרנט הנ'ל, הפריטים הגמישים נמצאים בשורה אחת ולא נעטפו.
סיכום
כדי למנוע פריטי flex מלהתעטף ב-Tailwind, השתמש בכלי השירות 'flex-nowrap' עם מיכל ה-flex הרצוי בתוכנת HTML. כלי זה מונע מהפריטים הגמישים להתעטף. לאימות, הצג את השינויים בדף האינטרנט. מאמר זה הדגים את השיטה למניעת עטיפה של פריטי flex ב-Tailwind CSS.