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;
}

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

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

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

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

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

  • row: يتمّ وضع العناصر على شكل صف.
  • row-reverse: يتم وضع العناصر كصف من نهاية الحاوية المرنة.
  • column: يتم وضع العناصر كعمود.
  • column-reverse : يتم وضع العناصر كعمود من نهاية الحاوية المرنة.

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

عكس تدفق العناصر وإمكانية الوصول

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

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

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

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

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

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

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

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

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

رسم تخطيطي مصنّف للمصطلحات المذكورة أعلاه

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

القيمة الأولية للسمة 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

flex-direction التلقائي هو

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

تتضمن الحاوية المرنة العناصر الثانوية تلقائيًا.

صحيح
يجب تفعيل الالتفاف.
false
استخدام flex-wrap: wrap مع display: flex لالتفاف العناصر الثانوية

يبدو أن هناك عنصرًا ثانويًا مرنًا، ما هي خاصية المرونة التي تساعد في تخفيف هذا؟

flex-grow
تصف هذه الخاصية ما إذا كان يمكن أن تنمو العناصر إلى ما يتجاوز حجم الأساس، وليس كيف يجب أن تتصرف على أساس أساس.
flex-shrink
نعم، تصف هذه السمة كيفية التعامل مع المقاس إذا كان العرض يتجه تحت الأساس.
flex-basis
يوفر هذا نقطة البداية للحجم، ولكن ليس كيفية التعامل مع سيناريوهات المقاسات التي يكون فيها العرض أقل من الأساس، كما هو الحال في سيناريو مضغوط.

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

أحضر 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;
}

للمحاذاة عموديًا مع Flexbox، استخدِم

محاذاة الكلمات الرئيسية
رائع.
ضبط الكلمات الرئيسية
آسف
 
.container {
  display: flex;
  direction: ltr;
}

للمحاذاة أفقيًا مع الإطار المرن، استخدِم

محاذاة الكلمات الرئيسية
آسف
ضبط الكلمات الرئيسية
رائع.
 
.container {
  display: flex;
  direction: ltr;
}

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

justify-content: flex-start
تُستخدم خاصية الضبط للمحاذاة الأفقية، وليس للمحاذاة العمودية.
align-content: start
يعمل content على محاذاة الخطوط المرنة، وليس محاذاة العناصر الثانوية.
height: auto
ولن يكون لذلك أي تأثير.
align-items: flex-start
نعم، نريد محاذاتهما عموديًا مع "الأعلى" أو البداية، ما يؤدي إلى إزالة قيمة التمديد التلقائية واستخدام ارتفاع المحتوى بدلاً من ذلك.

المراجِع