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