Wartości
row
(default) w wierszu
row-reverse
w odwrotnym wierszu
column
w kolumnie
column-reverse
w odwrtonej kolumnie
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;
height: 175px;
display: flex;
}
.flexbox-item {
padding: 10px;
}
Zobrazowanie
row (d)
.flexbox-container {
flex-direction: row;
}
row-reverse
.flexbox-container {
flex-direction: row-reverse;
}
column
.flexbox-container {
flex-direction: column;
}
column-reverse
.flexbox-container {
flex-direction: column-reverse;
}
Stylowe kategorie