كيفية محاذاة النص عموديًا داخل Flexbox؟

توضح هذه المقالة كيفية محاذاة النص عموديًا داخل flexbox:

• استخدام خاصية 'align-item'
• استخدام خاصية 'justify-content'

الطريقة الأولى: استخدام خاصية 'محاذاة العنصر'

لمحاذاة النص عموديًا ، يمكن للمستخدمين استخدام ' محاذاة البند 'التي قدمتها CSS. يساعد العناصر على ضبط محاذاة داخل الصندوق المرن. يمكن أن تكون أوضاع المحاذاة الرأسية المحتملة في ' قمة '، وسط '، أو ' قاع ' جانب.

ترد أدناه العروض العملية لمحاذاة العناصر في هذه الاتجاهات:

مثال 1: أعلى منصب

لمحاذاة النص داخل Flexbox في الموضع العلوي ، فإن ' بداية مرنة 'إلى' محاذاة العناصر ' ملكية. تم تعيين هذه الخاصية إلى div الرئيسي الذي سيتم عرضه على أنه مرن. لنفترض أن div مع فئة ' رَأسِيّ 'في ملف HTML. ثم في ملف CSS ، حدد تلك الفئة وقم بتعيين الخصائص التالية:

• أولاً ، يتم منح التصميم الأساسي والمحاذاة إلى div باستخدام خصائص اللون ولون الخلفية وخصائص الارتفاع في CSS.
• تم تعيين خاصية 'display' أيضًا على 'flex' لجعلها Flexbox.
• أخيرًا ، لعرض النص في بداية flexbox ، اضبط خاصية 'align-items' على 'flex-start.

بعد تنفيذ الكود أعلاه ، تبدو صفحة الويب كما يلي:

يعرض الإخراج أن النص تمت محاذاته الآن في الموضع العلوي داخل flexbox.

مثال 2: المركز الأوسط

لمحاذاة النص عموديًا في الموضع الأوسط ، اضبط ' مركز 'قيمة لـ CSS' محاذاة العناصر ' ملكية:

بعد تنفيذ الكود أعلاه:

يعرض الإخراج أعلاه أن النص يتم محاذاته الآن في وسط flexbox.

مثال 3: المركز السفلي

لتعيين النص في الجزء السفلي من flexbox ، قم بتعيين ' نهاية مرنة 'قيمة إلى' محاذاة العناصر ' ملكية. هذه المرة تتم محاذاة النص في الموضع الذي ينتهي عنده Flexbox مما يعني أنه في الجانب السفلي:

بعد تنفيذ الكود أعلاه ، تبدو صفحة الويب كما يلي:

يوضح الإخراج أعلاه أن النص الآن محاذي عموديًا في الموضع السفلي.

الطريقة 2: استخدام خاصية 'justify-content'

ال ' تبرير المحتوى يمكن أيضًا استخدام الخاصية 'لمحاذاة النص عموديًا داخل flexbox. ومع ذلك ، فإنه يعمل بنفس طريقة ' محاذاة النص 'وتقوم بمحاذاة العناصر في اتجاه الصف. لذلك ، لتغيير اتجاه المحاذاة ، فإن ' الاتجاه المرن 'لتعيين' تبرير المحتوى 'محاذاة نحو' عمود ' اتجاه:

يتم توفير شرح للكود أعلاه أدناه:

• ال ' ارتفاع '،' لون ' و ' المساحة المتروكة لليسار 'تعمل الخصائص تمامًا مثل الطريقة المذكورة أعلاه.
• بعد ذلك ، اضبط ' عمود 'قيمة إلى' الاتجاه المرن 'من flexbox لتطبيق الأنماط من خلال الأعمدة.
• بعد ذلك ، ' تبرير المحتوى 'لمحاذاة النص عموديًا.
• في النهاية ، ' نهاية مرنة 'قيمة محاذاة العنصر في' قاع ' جانب.

ملحوظة : يمكن للمستخدمين أيضًا تعيين ' بداية مرنة ' و ' مركز 'إلى' قمة '، و ' وسط '، على التوالي.

على سبيل المثال ، بعد تنفيذ الكود أعلاه ، تبدو صفحة الويب كما يلي:

يعرض الإخراج أعلاه أن النص يتم محاذاته في الجزء السفلي من flexbox.

خاتمة

لمحاذاة النص عموديًا داخل فليكس بوكس ​​، فإن ' محاذاة العناصر ' و ' تبرير المحتوى يمكن استخدام خصائص CSS. تحصل كلتا الخاصيتين على ' بداية مرنة '،' مركز ' أو ' نهاية مرنة 'القيم لمحاذاة النص في' قمة '،' وسط ' و ' قاع 'داخل flexbox ، على التوالي. لقد أظهرت هذه المقالة المحاذاة الرأسية للنص في flexbox.