מאמר זה מדגים כיצד ליישר אנכית טקסט בתוך flexbox:
שיטה 1: שימוש במאפיין 'align-item'.
כדי ליישר טקסט אנכית, משתמשים יכולים להשתמש ב-' align-item 'נכס מסופק על ידי CSS. זה עוזר לאלמנטים להגדיר את היישור שלהם בתוך ה-flexbox. מיקומי היישור האנכיים האפשריים יכולים להיות ב' חלק עליון ', אֶמצַע ', או ' תַחתִית 'צד.
ההדגמות המעשיות ליישור אלמנטים בכיוונים אלה מוצגות להלן:
דוגמה 1: מיקום עליון
כדי ליישר את הטקסט בתוך ה-flexbox במיקום העליון, ' flex-start הערך מסופק ל- align-items ' תכונה. מאפיין זה מוקצה ל-div הראשי שיוצג כ-flex. נניח, ה-div עם מחלקה של ' אֲנָכִי נוצר בקובץ HTML. לאחר מכן בקובץ ה-CSS, בחר את המחלקה והקצה את המאפיינים הבאים:
.אֲנָכִי {
צֶבַע : לבן ;
גוֹבַה : 150 פיקסלים ;
לְהַצִיג : לְהַגמִישׁ ;
ריפוד-שמאל : 20 פיקסלים ;
align-items : flex-start ;
צבע רקע : ירוק יער ;
}
- ראשית, עיצוב ויישור בסיסיים ניתנים ל-div באמצעות מאפייני צבע, צבע רקע וגובה של CSS.
- המאפיין 'תצוגה' מוגדר גם ל'גמיש' כדי להפוך אותו ל-flexbox.
- לבסוף, כדי להציג את הטקסט בתחילת ה-flexbox, הגדר את המאפיין 'align-items' ל-'flex-start.
לאחר ביצוע הקוד לעיל, דף האינטרנט נראה כך:
הפלט מציג שהטקסט מיושר כעת במיקום העליון בתוך ה-flexbox.
דוגמה 2: מיקום אמצעי
כדי ליישר אנכית את הטקסט במיקום האמצעי, הגדר את ' מֶרְכָּז 'ערך ל-CSS' align-items ' תכונה:
.אֲנָכִי {צֶבַע : לבן ;
גוֹבַה : 150 פיקסלים ;
לְהַצִיג : לְהַגמִישׁ ;
ריפוד-שמאל : 20 פיקסלים ;
align-items : מֶרְכָּז ;
צבע רקע : ירוק יער ;
}
לאחר ביצוע הקוד לעיל:
הפלט לעיל מציג שהטקסט מיושר כעת במרכז ה-flexbox.
דוגמה 3: מיקום תחתון
כדי להגדיר את הטקסט בתחתית ה-flexbox, הקצה את ' קצה גמיש 'ערך ל' align-items ' תכונה. הפעם הטקסט מיושר במיקום שבו ה-flexbox מסתיים פירושו בצד התחתון:
.אֲנָכִי {צֶבַע : לבן ;
גוֹבַה : 150 פיקסלים ;
לְהַצִיג : לְהַגמִישׁ ;
ריפוד-שמאל : 20 פיקסלים ;
align-items : קצה גמיש ;
צבע רקע : ירוק יער ;
}
לאחר ביצוע הקוד לעיל, דף האינטרנט נראה כך:
הפלט שלמעלה מציג שהטקסט כעת מיושר אנכית במיקום התחתון.
שיטה 2: שימוש בנכס 'הצדק-תוכן'.
ה ' להצדיק-תוכן ניתן להשתמש במאפיין גם כדי ליישר אנכית את הטקסט בתוך ה-flexbox. עם זאת, זה עובד כמו ' יישור טקסט ” מאפיין והוא מיישר אלמנטים בכיוון השורה. לכן, כדי לשנות את כיוון היישור, ' כיוון הגמיש מאפיין ' משמש כדי להגדיר את ' להצדיק-תוכן ' יישור לכיוון ' טור ' כיוון:
.אֲנָכִי {גוֹבַה : 150 פיקסלים ;
לְהַצִיג : לְהַגמִישׁ ;
ריפוד-שמאל : 20 פיקסלים ;
צֶבַע : לבן ;
צבע רקע : darkcyan ;
כיוון הגמיש : טור ;
להצדיק-תוכן : קצה גמיש ;
}
ההסבר של הקוד לעיל מסופק להלן:
- ה ' גוֹבַה ', ' צֶבַע ' ו' ריפוד-שמאל מאפיינים פועלים בדיוק כמו השיטה לעיל.
- לאחר מכן, הגדר את ' טור 'ערך ל' כיוון הגמיש ' של ה-flexbox כדי להחיל סגנונות דרך עמודות.
- לאחר מכן, ה' להצדיק-תוכן ' מאפיין מיישר את הטקסט בצורה אנכית.
- בסופו של דבר, ה' קצה גמיש ערך ' מיישר את הרכיב על ' תַחתִית 'צד.
הערה : משתמשים יכולים גם להגדיר ' flex-start ' ו' מֶרְכָּז ערכים ל- חלק עליון ', ו' אֶמצַע ' צדדים, בהתאמה.
לדוגמה, לאחר ביצוע הקוד לעיל, דף האינטרנט נראה כך:
הפלט שלמעלה מציג שהטקסט מיושר בתחתית ה-flexbox.
סיכום
כדי ליישר אנכית את הטקסט בתוך flexbox, ה-' align-items ' ו' להצדיק-תוכן ניתן להשתמש במאפייני CSS. שני הנכסים הללו מקבלים ' flex-start ', ' מֶרְכָּז ' או ' קצה גמיש ערכים ליישור הטקסט ב- חלק עליון ', ' אֶמצַע ' ו' תַחתִית ” כיוונים בתוך ה-flexbox, בהתאמה. מאמר זה הדגים את היישור האנכי של טקסט ב-flexbox.