دليل Flexbox

Flexbox ، المعروف أيضًا باسم Flexible Box Module ، هو أحد نظامي التخطيط الحديثين ، جنبًا إلى جنب مع CSS Grid

مقدمة

Flexbox ، المعروف أيضًا باسم Flexible Box Module ، هو أحد نظامي التخطيط الحديثين ، جنبًا إلى جنب مع CSS Grid.

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

الهدف الرئيسي من flexbox هو السماح للعناصر بملء المساحة الكاملة التي توفرها الحاوية الخاصة بهم ، اعتمادًا على بعض القواعد التي تحددها.

ما لم تكن بحاجة إلى دعم المتصفحات القديمة مثل IE8 و IE9 ، فإن Flexbox هي الأداة التي تتيح لك نسيان استخدام

  • تخطيطات الجدول
  • يطفو
  • الاختراقات clearfix
  • display: tableالخارقة

دعنا نتعمق في flexbox ونصبح خبيرًا فيه في وقت قصير جدًا.

دعم المتصفح

في وقت كتابة هذا التقرير (فبراير 2018) ، كان مدعومًا بنسبة 97.66 ٪ من المستخدمين ، وجميع المتصفحات الأكثر أهمية تقوم بتطبيقه منذ سنوات ، لذلك تمت تغطية حتى المتصفحات الأقدم (بما في ذلك IE10 +):

Browser support

بينما يجب أن ننتظر بضع سنوات حتى يتمكن المستخدمون من اللحاق بشبكة CSS ، فإن Flexbox هي تقنية قديمة ويمكن استخدامها في الوقت الحالي.

تمكين Flexbox

يتم تطبيق تخطيط flexbox على حاوية ، عن طريق الإعداد

display: flex;

أو

display: inline-flex;

المحتوىداخل الحاويةسيتم محاذاة باستخدام flexbox.


خصائص الحاوية

تنطبق بعض خصائص flexbox على الحاوية ، والتي تحدد القواعد العامة لعناصرها. هم انهم

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • flex-flow

قم بمحاذاة الصفوف أو الأعمدة

الخاصية الأولى التي نراها ،flex-direction، يحدد ما إذا كان يجب على الحاوية محاذاة عناصرها كصفوف أو كأعمدة:

  • flex-direction: rowيضع العناصر على هيئة أصف، في اتجاه النص (من اليسار إلى اليمين للبلدان الغربية)
  • flex-direction: row-reverseيضع العناصر تمامًاrowولكن في الاتجاه المعاكس
  • flex-direction: columnيضع العناصر فيعمودي، الترتيب من أعلى إلى أسفل
  • flex-direction: column-reverseيضع العناصر في عمود ، تمامًا مثلcolumnولكن في الاتجاه المعاكس

Rows or columns

المحاذاة الرأسية والأفقية

بشكل افتراضي ، تبدأ العناصر من اليسار إذاflex-directionيكونrow، ومن القمة إذاflex-directionيكونcolumn.

Vertical and horizontal alignment

يمكنك تغيير هذا السلوك باستخدامjustify-contentلتغيير المحاذاة الأفقية ، وalign-itemsلتغيير المحاذاة الرأسية.

قم بتغيير المحاذاة الأفقية

justify-contentلديه 5 قيم ممكنة:

  • flex-start: قم بمحاذاة الجانب الأيسر من الحاوية.
  • flex-end: قم بمحاذاة الجانب الأيمن من الحاوية.
  • center: محاذاة في وسط الحاوية.
  • space-between: عرض بمسافات متساوية بينهما.
  • space-around: عرض بمسافات متساوية حولها

Horizontal alignment

قم بتغيير المحاذاة الرأسية

align-itemsلديه 5 قيم ممكنة:

  • flex-start: قم بمحاذاة الجزء العلوي من الحاوية.
  • flex-end: قم بمحاذاة الجزء السفلي من الحاوية.
  • center: محاذاة في المركز الرأسي للحاوية.
  • baseline: العرض عند خط الأساس للحاوية.
  • stretch: يتم شد العناصر لتناسب الحاوية.

Vertical alignment

ملاحظة علىbaseline

baselineيشبهflex-startفي هذا المثال ، نظرًا لأن الصناديق الخاصة بي بسيطة للغاية. الدفعهذا Codepenللحصول على مثال أكثر فائدة ، والذي قمت بتقسيمه من قلم تم إنشاؤه في الأصل بواسطةمارتن ميتشاليك. كما ترى هناك ، يتم محاذاة أبعاد العناصر.

لف

بشكل افتراضي ، يتم الاحتفاظ بالعناصر الموجودة في حاوية Flexbox في سطر واحد ، مما يؤدي إلى تقليصها لتلائم الحاوية.

لفرض العناصر على الانتشار عبر عدة أسطر ، استخدمflex-wrap: wrap. سيؤدي هذا إلى توزيع العناصر وفقًا للترتيب المحدد فيflex-direction. يستخدمflex-wrap: wrap-reverseلعكس هذا الترتيب.

خاصية الاختزال تسمىflex-flowيسمح لك بتحديدflex-directionوflex-wrapفي سطر واحد ، عن طريق إضافةflex-directionالقيمة أولاً ، متبوعة بـflex-wrapالقيمة ، على سبيل المثال:flex-flow: row wrap.


الخصائص التي تنطبق على كل عنصر على حدة

منذ الآن ، رأينا الخصائص التي يمكنك تطبيقها على الحاوية.

يمكن أن تتمتع العناصر الفردية بقدر معين من الاستقلالية والمرونة ، ويمكنك تغيير مظهرها باستخدام تلك الخصائص:

  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

دعونا نراهم بالتفصيل.

نقل العناصر قبل / بعد آخر باستخدام الطلب

يتم ترتيب العناصر بناءً على الطلب الذي تم تعيينه لها. افتراضيا كل عنصر له ترتيب0ويحدد المظهر في HTML الترتيب النهائي.

يمكنك تجاوز هذه الخاصية باستخدامorderعلى كل عنصر منفصل. هذه خاصية قمت بتعيينها على العنصر وليس الحاوية. يمكنك جعل عنصر يظهر قبل كل العناصر الأخرى عن طريق تعيين قيمة سالبة.

Moving items before or after another one

محاذاة عمودية باستخدام محاذاة ذاتية

عنصر يمكن أن يختارتجاوزالحاويةalign-itemsالإعداد ، باستخدامalign-self، والتي لها نفس القيم الخمس الممكنة لـalign-items:

  • flex-start: قم بمحاذاة الجزء العلوي من الحاوية.
  • flex-end: قم بمحاذاة الجزء السفلي من الحاوية.
  • center: محاذاة في المركز الرأسي للحاوية.
  • baseline: العرض عند خط الأساس للحاوية.
  • stretch: يتم شد العناصر لتناسب الحاوية.

Vertical alignment

قم بتنمية أو تقليص عنصر إذا لزم الأمر

ينمو المرن

The defaut for any item is 0.

إذا تم تعريف جميع العناصر على أنها 1 وتم تعريف العنصر على أنه 2 ، فسيأخذ العنصر الأكبر مساحة عنصرين "1".

فليكس تقليص

The defaut for any item is 1.

إذا تم تعريف جميع العناصر على أنها 1 وتم تعريف العنصر الآخر على أنه 3 ، فإن العنصر الأكبر سيقلص 3 أضعاف العناصر الأخرى. عند توفر مساحة أقل ، سوف تستغرق مساحة أقل بمقدار 3 أضعاف.

أساس مرن

إذا تم التعيين علىauto، يقوم بقياس أحد العناصر وفقًا لعرضه أو ارتفاعه ، ويضيف مساحة إضافية بناءً علىflex-growمنشأه.

إذا تم التعيين على 0 ، فلن يضيف أي مساحة إضافية للعنصر عند حساب التخطيط.

إذا حددت قيمة رقم البكسل ، فستستخدمها كقيمة طول (يعتمد العرض أو الارتفاع إذا كان صفًا أو عنصر عمود)

ثني

تجمع هذه الخاصية بين الخصائص الثلاث المذكورة أعلاه:

  • flex-grow
  • flex-shrink
  • flex-basis

ويوفر صيغة مختصرة:flex: 0 1 auto

تحميل مجانيكتيب CSS


المزيد من دروس css: