flex-direction

מגדיר את כיוון הפריסה של האלמנטים הגמישים.

מה זה flex-direction?

המאפיין flex-direction קובע את כיוון התצוגה של האלמנטים בתיבת הגמישות. הוא קובע אם האלמנטים יוצגו בשורה אופקית או בעמודה אנכית.

ערכים

row - פריסה בשורה אופקית.
row-reverse - פריסה בשורה אופקית מהכיוון ההפוך.
column - פריסה בעמודה אנכית.
column-reverse - פריסה בעמודה אנכית מהכיוון ההפוך.

דוגמה לשימוש ב-flex-direction

להלן דוגמה לשימוש במאפיין flex-direction עם ערך column:

אלמנט 1

אלמנט 2

אלמנט 3

אפשר להגדיר את זה לדוגמה כך

    
          <style>
            .container {
              display: flex;
              flex-direction: column;
              border: 2px solid black;
            }
            .item {
              background-color: lightgreen;
              margin: 5px;
              padding: 10px;
            }
          </style>
          <div class="container">
            <div class="item">אלמנט 1</div>
            <div class="item">אלמנט 2</div>
            <div class="item">אלמנט 3</div>
          </div>