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