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