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

عند استخدام تخطيط Flexbox، من الممكن أن تتمدد العناصر المرنة وتملأ المساحة المتوفرة في الحاوية الخاصة بها . ومع ذلك، هناك مواقف قد ترغب فيها في منع حدوث ذلك.

لماذا يمكن أن تمتد العناصر المرنة؟

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

منع تمديد العنصر المرن

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

مثال

فكر في المثال التالي:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

  This is some text.

في هذا المثال، يمتد العنصر المرن (span) ليملأ الارتفاع الكامل لحاويته. لمنع ذلك، أضف النمط التالي إلى عنصر div:

align-items: flex-start;

يؤدي هذا إلى محاذاة العناصر المرنة على طول بداية الحاوية الخاصة بها، مما يمنعها من التمدد إلى ملء الارتفاع الكامل.