Wartości
stretch
(default)
flex-start
center
flex-end
space-between
space-around
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: 140px; display: flex; } .flexbox-item { width: 20%; height: 20px; }
Zobrazowanie

stretch (d)

.flexbox-container { align-content: stretch; } .flexbox-item { height: auto; }

flex-start

.flexbox-container { align-content: flex-start; }

flex-end

.flexbox-container { align-content: flex-end; }

center

.flexbox-container { align-content: center; }

space-around

.flexbox-container { align-content: space-around; }

space-between

.flexbox-container { align-content: space-between; }

space-evenly

.flexbox-container { align-content: space-around; }
Stylowe kategorie