flex-flow

מאגד את המאפיינים flex-direction ו-flex-wrap יחד.

מה זה flex-flow?

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

ערכים

הערכים כוללים את הערכים האפשריים ל-flex-direction ואת הערכים האפשריים ל-flex-wrap. לדוגמה: row wrap.

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

להלן דוגמה לשימוש במאפיין flex-flow:

אלמנט 1

אלמנט 2

אלמנט 3

אלמנט 4

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

    
          <style>
            .container {
              display: flex;
              flex-flow: row wrap;
              border: 2px solid black;
            }
            .item {
              background-color: lightpink;
              margin: 5px;
              padding: 10px;
              width: 100px;
            }
          </style>
          <div class="container">
            <div class="item">אלמנט 1</div>
            <div class="item">אלמנט 2</div>
            <div class="item">אלמנט 3</div>
            <div class="item">אלמנט 4</div>
          </div>