Wartości
stretch (default)
flex-start
center
flex-end
baseline
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: 110px;
display: flex;
}
.flexbox-item { width: 100%; }
.flexbox-item:nth-child(1) { height: 10px; }
.flexbox-item:nth-child(2) { height: 15px; }
.flexbox-item:nth-child(3) { height: 20px; }
.flexbox-item:nth-child(4) { height: 25px; }
.flexbox-item:nth-child(5) { height: 30px; }
.flexbox-item:nth-child(6) { height: 20px; }
.flexbox-item:nth-child(7) { height: 10px; }
Zobrazowanie
stretch (d)
.flexbox-container {
align-items: stretch;
}
.flexbox-item {
height: auto;
}
flex-start
.flexbox-container {
align-items: flex-start;
}
flex-end
.flexbox-container {
align-items: flex-end;
}
center
.flexbox-container {
align-items: center;
}
baseline
.flexbox-container {
align-items: baseline;
}
Stylowe kategorie