Flexbox

The CSS Podcast - 010: Flexbox

من أنماط التصميم التي قد تكون صعبة في التصميم السريع الاستجابة هو الشريط الجانبي الذي يظهر مضمّنًا في بعض المحتوى. في حال توفّر مساحة في إطار العرض، يناسب هذا النمط بشكلٍ رائع، ولكن في حال تكثيف المساحة، قد يتسبب هذا التنسيق الثابت في حدوث مشاكل.

نموذج تنسيق المربّع المرن (flexbox) هو نموذج تنسيق مصمّم للمحتوى أحادي الأبعاد. فهو يبرع في أخذ مجموعة من العناصر ذات الأحجام المختلفة، وعرض أفضل تخطيط لهذه العناصر.

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

ما هي الإجراءات التي يمكنك اتّخاذها باستخدام تنسيق مرن؟

تتضمّن تنسيقات Flex الخصائص التالية، التي ستتمكّن من استكشافها في هذا الدليل.

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

المحور الرئيسي والمحور العرضي

مفتاح فهم flexbox هو فهم مفهوم المحور الرئيسي والمحور الصليبي. المحور الرئيسي هو المحور الذي تم ضبطه من خلال موقعك على flex-direction. إذا كان هذا الرمز هو row، يكون محورك الرئيسي على طول الصف، وإذا كان column، يكون محورك الرئيسي على طول العمود.

يتم نقل عناصر Flex كمجموعة على المحور الرئيسي. تذكر: لدينا مجموعة من الأشياء ونحاول الحصول على أفضل تخطيط لهم كمجموعة.

يمتدّ المحور العرضي في الاتجاه الآخر للمحور الرئيسي، وإذا كان flex-direction هو row، يمتدّ المحور العرضي على طول العمود.

يمكنك عمل شيئين على المحور المتقاطع. يمكنك نقل العناصر بشكل فردي أو كمجموعة، بحيث تتم محاذاتها مع بعضها البعض ومع المرونة . بالإضافة إلى ذلك، إذا كانت لديك أسطر مرنة ملتفة، يمكنك التعامل مع هذه الأسطر كمجموعة للتحكّم في كيفية تخصيص المساحة لهذه الأسطر. ستتعرّف على كيفية عمل كل ذلك في الممارسة خلال هذا الدليل، ولكن في الوقت الحالي، ضَع في اعتبارك أنّ المحور الرئيسي يتّبع flex-direction.

إنشاء حاوية مرنة

لنلقِ نظرة على كيفية سلوك flexbox من خلال أخذ مجموعة من العناصر ذات الأحجام المختلفة واستخدام flexbox لعرضها.

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

لاستخدام flexbox، عليك الإفصاح عن أنّك تريد استخدام سياق تنسيق flex وليس التنسيق العادي للكتل والتنسيقات المضمّنة. يمكنك إجراء ذلك من خلال تغيير قيمة سمة display إلى flex.

.container {
  display: flex;
}

كما تعلمت في دليل التنسيق، سيمنحك ذلك مربّعًا على مستوى الكتلة، مع عناصر مرنة فرعية. تبدأ عناصر Flex على الفور في عرض بعض سلوك Flexbox باستخدام قيمها الأولية.

تعني القيم الأولية ما يلي:

• يتم عرض العناصر كصف.
• لا يتم لفّها.
• ولا تكبر هذه العناصر لملء الحاوية.
• يتمّ صفّها في بداية الحاوية.

التحكم في اتجاه العناصر

على الرغم من عدم إضافة موقع flex-direction بعد، يتم عرض السلع كصف لأنّ القيمة الأولية لسمة flex-direction هي row. إذا كنت تريد صفًا، لن تحتاج إلى إضافة السمة. لتغيير الاتجاه، أضف الخاصية وإحدى القيم الأربع:

• row: يتم تنسيق العناصر في شكل صف.
• row-reverse: يتم ترتيب العناصر في صف من نهاية الحاوية المرنة.
• column: يتم تنسيق العناصر كعمود
• ‫column-reverse : يتم عرض العناصر كعمود من نهاية حاوية Flex.

يمكنك تجربة كل القيم باستخدام مجموعة العناصر في العرض التوضيحي أدناه.

عكس تدفق العناصر وسهولة الوصول

يجب توخي الحذر عند استخدام أي سمات تُعيد ترتيب العرض المرئي. بعيدًا عن كيفية ترتيب الأشياء في وثيقة HTML، حيث يمكن أن يؤثر سلبًا على سهولة الوصول. وتمثل قيمتَا row-reverse وcolumn-reverse مثالاً جيدًا على ذلك. تحدث إعادة الترتيب للترتيب المرئي فقط وليس الترتيب المنطقي. من المهم فهم هذا لأن الترتيب المنطقي هو الترتيب الذي سيقرأه قارئ الشاشة بصوت عالٍ والمحتوى، وسيتابع أي شخص يتنقل باستخدام لوحة المفاتيح.

يمكنك الاطّلاع في الفيديو التالي على كيفية استخدام ميزة التنقل بين الروابط باستخدام مفتاح التبويب في تنسيق الصفوف المقلوبة، حيث يتبع التنقّل باستخدام لوحة المفاتيح نموذج DOM وليس الشاشة المرئية.

يمكن أن تتسبب أي عملية يمكنها تغيير ترتيب العناصر في المربّع المرن أو الشبكة في حدوث هذه المشكلة. لذلك، يجب أن تتضمّن أي إعادة ترتيب اختبارًا شاملاً للتأكّد من أنّها لن تصعِّب استخدام موقعك الإلكتروني على بعض المستخدمين.

لمزيد من المعلومات، يُرجى الاطّلاع على:

• إعادة ترتيب المحتوى
• عدم ربط Flexbox بتنقّل لوحة المفاتيح

أوضاع الكتابة واتجاهها

يتم تخطيط العناصر المرنة كصف افتراضيًا. يعمل الصف في اتجاه تتدفق الجمل في وضع الكتابة واتجاه النص البرمجي. وهذا يعني أنّه إذا كنت تعمل باللغة العربية، التي يكون اتجاه النص فيها من اليمين إلى اليسار (rtl)، ستتم ترتيب العناصر على اليمين. سيبدأ ترتيب التبويب أيضًا من اليمين لأنّ هذه هي الطريقة التي تُقرأ بها الجمل باللغة العربية.

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

وبالتالي، ترتبط طريقة سلوك عناصر Flex تلقائيًا بوضع الكتابة في المستند. تتم كتابة معظم الأدلة التعليمية باستخدام اللغة الإنجليزية أو وضع كتابة آخر أفقيًا من اليمين إلى اليسار. سيسهّل ذلك افتراض أنّ عناصر Flex يتمّ صفّها على اليسار، وأنّها تظهر أفقيًا.

مع المحورَين الرئيسي والعمودي بالإضافة إلى وضع الكتابة الذي يجب أخذه في الاعتبار، قد يكون من الأسهل فهم حقيقة أنّنا نتحدث عن البداية والنهاية بدلاً من العلو والسفلي واليمين واليسار في صندوق المرونة. لكل محور بداية ونهاية. يُشار إلى بداية المحور الرئيسي باسم main-start. إذًا، يتم ترتيب العناصر المرنة في البداية من البداية. نهاية هذا المحور هي main-end. تكون بداية المحور المتقاطع بداية متقاطعة ونهاية طرف متقاطع.

التفاف العناصر المرنة

القيمة الأولية للسمة flex-wrap هي nowrap. وهذا يعني أنّه في حال عدم توفّر مساحة كافية في الحاوية، سيتم تجاوز الحدّ الأقصى المسموح به للعناصر.

سيتم تصغير العناصر المعروضة باستخدام القيم الأولية إلى أصغر حجم ممكن، إلى حجم min-content قبل حدوث الزيادة.

لجعل التفاف العناصر، أضِف flex-wrap: wrap إلى حاوية العلامة المرنة.

.container {
  display: flex;
  flex-wrap: wrap;
}

عند التفاف حاوية مرنة، تؤدي إلى إنشاء خطوط مرنة متعدّدة. من حيث توزيع المساحة، يعمل كل سطر كحافض مرن جديد. لذلك، إذا كنت تُعيد ترتيب الصفوف، لا يمكن جعل عنصر في الصف 2 يتماشى مع عنصر أعلى منه في الصف 1. هذا هو المقصود من أنّ المربّع المرن أحادي الأبعاد. يمكنك التحكم في المحاذاة في محور واحد أو صف أو عمود، وليس كلاهما معًا كما يمكننا أن نفعل في الشبكة.

اختصار تدفق المرونة

يمكنك ضبط السمتَين flex-direction وflex-wrap باستخدام الاختصار flex-flow. على سبيل المثال، لضبط flex-direction على column والسماح بالتفاف العناصر:

.container {
  display: flex;
  flex-flow: column wrap;
}

التحكم في المساحة داخل العناصر المرنة

وبافتراض أن حاويتنا تحتوي على مساحة أكبر مما هو مطلوب لعرض العناصر، وتصطف العناصر في البداية ولا تكبر لملء المساحة. وتتوقف عن النمو عند بلوغ الحد الأقصى لحجم المحتوى. ويرجع ذلك إلى أنّ القيمة الأولية لسمات flex- هي:

• flex-grow: 0: لا يزداد حجم العناصر.
• flex-shrink: 1: يمكن أن تتقلص العناصر أصغر من flex-basis.
• flex-basis: auto: يبلغ حجم الأساسي للسلعة auto.

ويمكن تمثيل ذلك بقيمة كلمة رئيسية تبلغ flex: initial. تمثّل هذه السمة خاصية flex المختصرة. أو يتم تطبيق الرموز الطويلة لـ flex-grow وflex-shrink وflex-basis على عناصر الحاوية المرنة.

للتسبب في زيادة العناصر، مع السماح للعناصر الكبيرة بالحصول على مساحة أكبر من العناصر الصغيرة، يستخدم flex:auto. يمكنك تجربة ذلك باستخدام العرض التوضيحي أعلاه. يؤدي ذلك إلى ضبط السمات على:

• flex-grow: 1: يمكن أن تصبح العناصر أكبر من flex-basis.
• flex-shrink: 1: يمكن أن تتقلص العناصر أصغر من flex-basis.
• flex-basis: auto: يكون حجم العناصر الأساسية auto.

سيؤدي استخدام flex: auto إلى اختلاف أحجام العناصر، لأنّ المساحة التي تتم مشاركتها بين العناصر تتم مشاركتها بعد عرض كل عنصر على النحو التالي: max-content size. لذلك سيحصل العنصر الكبير على مساحة أكبر. لفرض حجم جميع العناصر بشكل متّسق وتجاهل تغيير المحتوى flex:auto إلى flex: 1 في العرض التوضيحي

يؤدي هذا الإجراء إلى فتح حزمة المحتوى من أجل:

• flex-grow: 1: يمكن أن يزيد حجم السلع عن flex-basis.
• flex-shrink: 1: يمكن أن تتقلص العناصر أصغر من flex-basis.
• flex-basis: 0: يبلغ حجم الأساسي للسلعة 0.

يشير استخدام flex: 1 إلى أنّ حجم كل العناصر يساوي صفرًا، وبالتالي، تتوفّر كل المساحة في الحاوية المرنة ليتم توزيعها. بما أنّ جميع العناصر لها عامل flex-grow يساوي 1، فإنّها تنمو جميعًا بالتساوي وتتم مشاركة المساحة بالتساوي.

السماح بالنمو في العناصر بمعدلات مختلفة

ليس عليك منح جميع السلع عامل flex-grow يساوي 1. يمكنك منح عناصرك المرنة عوامل flex-grow مختلفة. في العرض التوضيحي أدناه، يحتوي العنصر الأول على flex: 1 والعنصر الثاني flex: 2 والثالث flex: 3. عند زيادة هذه العناصر من 0، تتمّ مشاركة المساحة المتاحة في حاوية العناصر المرنة إلى ستة. يتم إعطاء جزء واحد للعنصر الأول، جزأين إلى الجزء الثاني، ثلاثة أجزاء على الجزء الثالث.

ويمكنك تطبيق الإجراء نفسه من flex-basis لـ auto، ولكن عليك تحديد الخيارات الثلاثة. القيم. القيمة الأولى هي flex-grow، والثانية flex-shrink، والثالثة flex-basis.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

هذه هي حالة استخدام أقل شيوعًا بسبب استخدام flex-basis لـ auto. هو السماح للمتصفح بمعرفة توزيع المساحة. إذا كنت ترغب في التسبب في نمو عنصر ما أكثر قليلاً مما تقرر الخوارزمية مهما كان مفيدة.

إعادة ترتيب العناصر المرنة

يمكن إعادة ترتيب العناصر في الحاوية المرنة باستخدام السمة order. تسمح هذه السمة بترتيب العناصر في المجموعات الترتيبية. يتم ترتيب العناصر بالاتجاه الذي يحدده flex-direction، القيم الأقل أولاً. إذا كانت هناك أكثر من سلعة لها القيمة نفسها، سيتم عرضها مع العناصر الأخرى بهذه القيمة.

يوضح المثال أدناه هذا الترتيب.

التحقق من فهمك

اختبِر معلوماتك حول Flexbox

نظرة عامة على محاذاة المربّع المرن

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

يمكن وضع مجموعة السمات في مجموعتَين. سمات توزيع المساحة، وسمات المحاذاة في ما يلي الخصائص التي توزِّع المساحة:

• justify-content: توزيع المساحة على المحور الرئيسي
• align-content: توزيع المساحة على المحور المتقاطع
• place-content: اختصار لضبط كلتا السمتَين أعلاه.

السمات المستخدَمة للمحاذاة في المربّع المرن:

• align-self: محاذاة عنصرًا واحدًا على المحور المتقاطع
• align-items: محاذاة جميع العناصر كمجموعة على المحور العرضي

إذا كنت تعمل على المحور الرئيسي، ستبدأ السمات بـ justify-. في المحور العرضي، تبدأ الأرقام بـ align-.

توزيع المساحة على المحور الرئيسي

باستخدام رمز HTML المستخدَم سابقًا، يتم ترتيب عناصر Flex في صف، وتتوفر مساحة على المحور الرئيسي. العناصر ليست كبيرة بما يكفي لملء الحاوية المرنة بالكامل. تتم إضافة العناصر في بداية الحاوية المرنة لأن القيمة الأولية justify-content. flex-start. يتم ترتيب العناصر في البداية وتظهر أي مسافة إضافية في النهاية.

أضِف السمة justify-content إلى حاوية Flex، وأضِف إليها القيمة flex-end، وتصطف العناصر في نهاية الحاوية ويتم وضع المساحة الاحتياطية في البداية.

.container {
  display: flex;
  justify-content: flex-end;
}

يمكنك أيضًا توزيع المسافة بين العناصر باستخدام justify-content: space-between.

جرب بعض القيم الموجودة في العرض التوضيحي، وراجع MDN للحصول على مجموعة كاملة من القيم المحتملة.

باستخدام flex-direction: column

إذا غيّرت flex-direction إلى column، سيعمل justify-content على العمود. لتوفير مساحة فارغة في حاويتك عند العمل كعمود، عليك منح الحاوية height أو block-size وإلا لن تكون لديك مساحة كافية للتوزيع.

جرِّب القيم المختلفة، ولكن باستخدام تخطيط عمود flexbox.

توزيع المساحة بين أسطر المرونة

باستخدام حاوية مرنة ملفوفة، قد يكون لديك مساحة لتوزيعها على المحور المتقاطع. في هذه الحالة، يمكنك استخدام السمة align-content بالقيم نفسها لسمة justify-content. على عكس justify-content الذي يؤدّي إلى محاذاة العناصر تلقائيًا إلى flex-start، تكون القيمة الأولية لـ align-content هي stretch. أضِف السمة align-content إلى حاوية Flex لتغيير هذا السلوك التلقائي.

.container {
  align-content: center;
}

جرِّب هذا في العرض التوضيحي. يحتوي المثال على سطور ملفوفة من العناصر المرنة، وتشتمل الحاوية على block-size لكي يكون لدينا مساحة فارغة.

اختصار place-content

لضبط كل من justify-content وalign-content، يمكنك استخدام place-content مع قيمة واحدة أو قيمتَين. سيتم استخدام قيمة واحدة لكلا المحورين، إذا حددت أن النوع الأول سيتم استخدامه لـ align-content والثاني يُستخدم لـ justify-content.

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

محاذاة العناصر على المحور العرضي

على المحور المتقاطع، يمكنك أيضًا محاذاة العناصر داخل الخط المرن باستخدام align-items وalign-self. تعتمد المساحة المتوفّرة لهذا المحاذاة على ارتفاع حاوية Flex أو سطر Flex في حال مجموعة عناصر مُلفّفة.

القيمة الأولية للمَعلمة align-self هي stretch، ولهذا السبب يتم تمديد عناصر Flex في الصف إلى ارتفاع أعلى عنصر تلقائيًا. لتغيير هذه الإعدادات، أضِف السمة align-self إلى أي من العناصر المرنة.

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

استخدِم أيًا من القيم التالية لمحاذاة العنصر:

• flex-start
• flex-end
• center
• stretch
• baseline

اطّلِع على القائمة الكاملة للقيم على MDN.

يتضمّن العرض الترويجي التالي سطرًا واحدًا من عناصر Flex مع flex-direction: row. يحدِّد العنصر الأخير ارتفاع حاوية Flex. العنصر الأول يتضمّن السمة align-self بقيمة flex-start. حاوِل تغيير القيمة في هذه السمة لمعرفة كيفية تحرّكه ضمن مساحته على المحور المتقاطع.

يتم تطبيق السمة align-self على عناصر فردية. يمكن تطبيق السمة align-items على الحاوية المرنة. لضبط كل سمات align-self الفردية كمجموعة.

.container {
  display: flex;
  align-items: flex-start;
}

في هذا العرض التوضيحي التالي، جرِّب تغيير قيمة align-items لمحاذاة كل العناصر على شكل الإعلان المتقاطع. كمجموعة.

لماذا لا يتوفّر عنصر justify-self في flexbox؟

تعمل العناصر المرنة كمجموعة على المحور الرئيسي. وبالتالي، لا يمكن تقسيم عنصر فردي من هذه المجموعة.

في تنسيق الشبكة، تعمل السمتان justify-self وjustify-items على المحور المضمّن محاذاة العناصر الموجودة على هذا المحور داخل منطقة الشبكة. ونظرًا للطريقة التي تعامل بها التخطيطات المرنة العناصر كمجموعة، لا يتم تنفيذ هذه السمات في سياق مرن.

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

كيفية توسيع عنصر عموديًا وأفقيًا

يمكن استخدام سمات المحاذاة لمحاذاة عنصر في منتصف مربّع آخر. تعمل السمة justify-content على محاذاة العنصر على المحور الرئيسي، وهو الصف. سمة align-items على المحور العرضي

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

التحقّق من فهمك

اختبِر معلوماتك حول Flexbox

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

الموارد

• يتضمّن MDN CSS Flexible Box Layout سلسلة من الأدلة التفصيلية التي تتضمّن أمثلة.
• دليل حيل CSS لاستخدام Flexbox
• ماذا يحدث عند إنشاء حاوية Flexbox Flex
• كل ما تحتاج إلى معرفته عن المحاذاة في Flexbox
• ما حجم هذا المربّع المرن؟
• حالات استخدام نموذج Flexbox
• فحص تنسيقات CSS Flexbox وتصحيح الأخطاء فيها في "أدوات مطوري البرامج في Chrome"