الخاصية flex-direction

الخاصية flex-direction في CSS تُعرِّف ما هو المحور الرئيسي (main axis) في حاوية flex وما اتجاهه (عادي أم معكوس).

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

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

/* اتجاه العناصر أفقي */
flex-direction: row;

/* اتجاه العناصر أفقي، لكن بالمقلوب */
flex-direction: row-reverse;

/* اتجاه العناصر رأسي */
flex-direction: column;

/* اتجاه العناصر رأسي، لكن بالمقلوب */
flex-direction: column-reverse;

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

لاحظ أنَّ القيمتين row و row-reverse تتأثران باتجاه حاوية flex، فلو كانت الخاصية dir مضبوطةً إلى ltr (أي من اليسار إلى اليمين، كما في اللغة الإنكليزية)، فستمثِّل القيمة row المحور الأفقي باتجاه من اليسار إلى اليمين، و row-reverse ستمثِّل المحور الأفقي باتجاه من اليمين إلى اليسار؛ أما لو كانت قيمة dir تساوي rtl (أي من اليمين إلى اليسار، كما في اللغة العربية)، فستمثِّل row المحور الأفقي المتجه من اليمين إلى اليسار، والقيمة row-reverse ستُمثِّله لكن من اليسار إلى اليمين.

أمثلة

مثال عن استخدام الخاصية flex-direction لضبط المحور الرئيسي وضبط اتجاهه، ويبيّن استعمال الكلمات المحجوزة row و row-reverse و column و column-reverse:

<div class="grid">
  <div class="col">
    <div class="row">
      <div class="cell">
        row
        <div class="container row">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
      <div class="cell">
        row-reverse
        <div class="container row-reverse">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        column
        <div class="container column">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
      <div class="cell">
        column-reverse
        <div class="container column-reverse">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
    </div>
  </div>
</div>

شيفرة CSS:

.grid {
  width: 100%;
  min-height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  height: auto;
}

.cell {
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
  flex: 1 auto;
}

.container {
  background: #E4F0F5;
  padding: .5rem;
  margin: 0 auto;
  font-size: 1rem;
  display:flex;
  width: 11rem;
  height: 11rem;
}

.container span {
  display: block;
  padding: 1em;
  margin: .1em;
  border: 1px solid black;
  background: #CCC;
  flex: 1;
}

.row            { flex-direction: row; }
.row-reverse    { flex-direction: row-reverse; }
.column         { flex-direction: column; }
.column-reverse { flex-direction: column-reverse; }

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

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

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

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

تقبل الخاصية flex-direction قيمةً واحدةً من القيم الآتية:

row

سيكون المحور الرئيسي لحاوية flex بنفس اتجاه النص، أي من اليسار إلى اليمين إذا كانت dir تساوي ltr، ومن اليمين إلى اليسار إذا كانت dir تساوي rtl.

row-reverse

لها نفس سلوك الكلمة المحجوزة row لكن مع عكس مكان البداية والنهاية.

column

سيكون المحور الرئيسي لحاوية flex من الأعلى إلى الأسفل.

column -reverse

لها نفس سلوك الكلمة المحجوزة column  لكن مع عكس مكان البداية والنهاية.

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

flex-direction: row | row-reverse | column | column-reverse;

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

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