CSS/flex-wrap

الخاصية flex-wrap في CSS تُحدِّد فيما إذا كانت عناصر flex يجب أن تكون محتواةً في سطرٍ وحيد أم يمكن التفافها إلى عدِّة أسطر، وإذا سُمِحَ بالالتفاف (wrap) فيمكننا باستخدام هذه الخاصية تحديد ترتيب تكديس الأسطر.

بطاقة الخاصية

القيمة الابتدائية	nowrap
تُطبَّق على	حاويات flex.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

/* كلمات محجوزة */
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* قيم عامة */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

أمثلة

هذا المثال يبيّن استخدام الكلمات المحجوزة wrap و nowrap و wrap-reverse مع الخاصية flex-wrap لتبيان كيف ستلتف العناصر بعد تجاوزها عرض الحاوية.

<p><code>flex-wrap: wrap</code>:</p>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<p><code>flex-wrap: nowrap</code>:</p>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<p><code>flex-wrap: wrap-reverse</code>:</p>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

شيفرة CSS:

.content,
.content1,
.content2 {
    color: #fff;
    font: 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div,
.content1 div,
.content2 div {
    height: 50%;
    width: 50%;
}
.red {
    background-color: salmon;
}
.green {
    background-color: lightseagreen;
}
.blue {
    background: steelblue;
}

.content {
    display: flex;
    flex-wrap: wrap;
}
.content1 {
    display: flex;
    flex-wrap: nowrap;
}
.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	29.0	20.0	11	12.5	9.0

الإصدارات القديمة من بعض المتصفحات (مثل Chrome و IE و Safari) كانت تدعم flexbox لكن مع استخدام سابقة (-webkit- أو -ms-).

البنية العامة

تقبل الخاصية flex-wrap قيمةً واحدةً من الكلمات المحجوزة التالية.

nowrap

ستوضع عناصر flex في سطرٍ وحيد، مما قد يسبب في خروج المحتوى من حاويته إن لم تكن تتسع له.

wrap

ستوضع عناصر flex في عدِّة أسطر إن كان ذلك لازمًا، وسيكون اتجاه الالتفاف من الأعلى إلى الأسفل.

wrap-reverse

كما في الكلمة المحجوزة wrap، لكن اتجاه الالتفاف بالمقلوب.

البنية الرسمية

flex-wrap: nowrap | wrap | wrap-reverse;

انظر أيضًا

• صفحة الخاصية flex صفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: flex-basis، و flex-direction، وflex-flow، وflex-grow، وflex-shrink.
• صفحة كل من الخاصيات width، وheight المسؤولة عن تحديد أبعاد العنصر.
• صفحة الخاصية position التي تصف كيف يجب أن يتموضع العنصر في المستند.

مصادر ومواصفات

• مواصفة CSS Flexible Box Layout Module.