عرض مصدر CSS/flex-direction

<noinclude>{{DISPLAYTITLE:الخاصية <code>flex-direction</code>}}</noinclude>
الخاصية <code>flex-direction</code> في CSS تُعرِّف ما هو المحور الرئيسي (main axis) في حاوية flex وما اتجاهه (عادي أم معكوس).<syntaxhighlight lang="css">
/* اتجاه العناصر أفقي */
flex-direction: row;

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

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

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

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

</syntaxhighlight>لاحظ أنَّ القيمتين <code>row</code> و <code>row-reverse</code> تتأثران باتجاه حاوية flex، فلو كانت الخاصية <code>dir</code> مضبوطةً إلى <code>ltr</code> (أي من اليسار إلى اليمين، كما في اللغة الإنكليزية)، فستمثِّل القيمة <code>row</code> المحور الأفقي باتجاه من اليسار إلى اليمين، و <code>row-reverse</code> ستمثِّل المحور الأفقي باتجاه من اليمين إلى اليسار؛ أما لو كانت قيمة <code>dir</code> تساوي <code>rtl</code> (أي من اليمين إلى اليسار، كما في اللغة العربية)، فستمثِّل <code>row</code> المحور الأفقي المتجه من اليمين إلى اليسار، والقيمة <code>row-reverse</code> ستُمثِّله لكن من اليسار إلى اليمين.
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>row</code>
|-
! scope="row" |تُطبَّق على
|حاويات flex.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}

== أمثلة ==
مثال عن استخدام الخاصية <code>flex-direction</code> لضبط المحور الرئيسي وضبط اتجاهه، ويبيّن استعمال الكلمات المحجوزة <code>row</code> و <code>row-reverse</code> و <code>column</code> و <code>column-reverse</code>: <syntaxhighlight lang="html">
<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>
</syntaxhighlight>شيفرة CSS: <syntaxhighlight lang="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; }
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|29.0
|20.0
|11
|12.5
|9.0
|}
الإصدارات القديمة من بعض المتصفحات (مثل Chrome و IE و Safari) كانت تدعم flexbox لكن مع استخدام سابقة (<code>-webkit-</code> أو <code>-ms-</code>).

== البنية العامة ==
تقبل الخاصية <code>flex-direction</code> قيمةً واحدةً من القيم الآتية:

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

=== القيمة <code>row-reverse</code> ===
لها نفس سلوك الكلمة المحجوزة <code>row</code> لكن مع عكس مكان البداية والنهاية.

=== القيمة <code>column</code> ===
سيكون المحور الرئيسي لحاوية flex من الأعلى إلى الأسفل.

=== القيمة <code>column -reverse</code> ===
لها نفس سلوك الكلمة المحجوزة <code>column </code> لكن مع عكس مكان البداية والنهاية.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
flex-direction: row | row-reverse | column | column-reverse;
</syntaxhighlight>
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-flexbox-1/#flex-direction CSS Flexible Box Layout Module]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Flexbox|{{SUBPAGENAME}}]]