Flexbox

بودكاست CSS - 010: Flexbox

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

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

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

ما الذي يمكنك فعله باستخدام التخطيط المرن؟

تحتوي التخطيطات المرنة على الميزات التالية، ستتمكّن من استكشافه في هذا الدليل

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

المحور الرئيسي والمحور الصليبي

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

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

يسير المحور المتقاطع في الاتجاه الآخر على المحور الرئيسي، وبالتالي، إذا كانت قيمة 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، يجب تعريفك بأنّك تريد استخدام سياق تنسيق مرن، وليس سياقًا عاديًا. الكتلة والتخطيط المضمّن. ويمكنك إجراء ذلك من خلال تغيير قيمة السمة display إلى flex.

.container {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

• إعادة ترتيب المحتوى
• الوضع المرن وقطع الاتصال أثناء التنقّل باستخدام لوحة المفاتيح

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

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

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

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

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

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

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

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

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

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

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

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

يمكنك ضبط السمتَين 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 أنّ أحجام العناصر تختلف في النهاية، حيث تتم مشاركة المساحة المشتركة بين العناصر بعد تحديد كل عنصر الحجم الأقصى للمحتوى. لذلك سيحصل العنصر الكبير على مساحة أكبر. لفرض حجم جميع العناصر بشكل متّسق وتجاهل تغيير المحتوى 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: اختصار لضبط كلتا السمتَين أعلاه.

الخصائص المستخدمة للمحاذاة في flexbox:

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

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

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

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

أضِف السمة justify-content إلى الحاوية المرنة، ونخصص له القيمة 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 إلى حاوية العلامة المرنة لتغيير هذا السلوك التلقائي.

.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. ستعتمد المساحة المتاحة لهذه المحاذاة على ارتفاع حاوية الخط المرن، أو الخط المرن في حالة وجود مجموعة ملفوفة من العناصر.

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

.container {
  display: flex;
}

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

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

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

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

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

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

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

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

ما سبب عدم وجود ضبط-ذاتي في 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 سلسلة من الأدلة التفصيلية مع أمثلة.
• دليل حيل CSS حول Flexbox
• ماذا يحدث عند إنشاء حاوية Flexbox Flex
• كل ما تحتاج إلى معرفته عن المحاذاة في Flexbox
• ما حجم هذا الصندوق المرن؟
• حالات الاستخدام لـ Flexbox
• فحص تنسيقات CSS Flexbox وتصحيح الأخطاء فيها في "أدوات مطوري البرامج في Chrome"