flex-wrap

מגדיר אם האלמנטים הגמישים צריכים לעטוף את עצמם כאשר הם יוצאים מהשורה.

מה זה flex-wrap?

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

ערכים

nowrap - ברירת מחדל. האלמנטים לא עוטפים לשורות נוספות.
wrap - האלמנטים עוטפים לשורות נוספות כאשר הם יוצאים מהשורה הראשית.
wrap-reverse - האלמנטים עוטפים לשורות נוספות בכיוון ההפוך.

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

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

אלמנט 1

אלמנט 2

אלמנט 3

אלמנט 4

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

    
          <style>
            .container {
              display: flex;
              flex-wrap: wrap;
              border: 2px solid black;
            }
            .item {
              background-color: lightcoral;
              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>