Wartości
nowrap
bez przechodzenia do kolejnego wiersza
wrap
przeniesienie do nowej linii
wrap-reverse
jak wrap, tylko wodwrotnej kolejności od przeciwnego rogu
Kod HTML
<div class="flexbox-container"> <div class="flexbox-item"></div> <div class="flexbox-item"></div> <div class="flexbox-item"></div> <div class="flexbox-item"></div> <div class="flexbox-item"></div> <div class="flexbox-item"></div> <div class="flexbox-item"></div> </div>
Kod CSS
.flexbox-container { background: #fff; border: 1px solid #e3e3e3; display: flex; } .flexbox-item { width: 20%; padding: 10px; }
Zobrazowanie

nowrap (d)

.flexbox-container { flex-wrap: nowrap; }

wrap

.flexbox-container { flex-wrap: wrap; }

wrap-reverse

.flexbox-container { flex-wrap: wrap-reverse; }
Stylowe kategorie