الخاصية flex-wrap

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

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

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

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

أمثلة

هذا المثال يبيّن استخدام الكلمات المحجوزة 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;

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

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