Seeking a deeper understanding of flexbox alignment, I decided to experiment with aligning content using only flexbox properties. One puzzling observation is how "justify-content" centers items with single lines of text (flex-item-1 and flex-item-5), but not the others. Can anyone point out what I might be overlooking?
To see my CSS example in action, check out this link: https://codepen.io/altroboy/pen/NWXNBxZ
.flex-container {
display: flex;
flex-wrap: wrap;
width: 50%;
height: 50vh;
background: hsl(120, 0%, 80%);
justify-content: center;
}
.flex-item {
flex: 0 1 30%;
display: flex;
align-items: center;
justify-content: center;
}
.flex-item-1 {
background: hsl(0, 80%, 50%);
}
.flex-item-2 {
background: hsl(60, 80%, 50%);
}
.flex-item-3 {
background: hsl(120, 80%, 50%);
}
.flex-item-4 {
background: hsl(180, 80%, 50%);
}
.flex-item-5 {
background: hsl(240, 80%, 50%);
}
.flex-item-6 {
background: hsl(300, 80%, 50%);
}<div class="flex-container">
<div class="flex-item flex-item-1">11111 11111 11111 11111</div>
<div class="flex-item flex-item-2">22222 22222 33333 22222 22222 22222 22222</div>
<div class="flex-item flex-item-3">33333 33333 33333 33333 33333 33333 33333 33333 33333 33333</div>
<div class="flex-item flex-item-4">44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 </div>
<div class="flex-item flex-item-5">55555 55555 55555 55555 </div>
<div class="flex-item flex-item-6">66666 66666 66666 66666 66666 66666 66666 66666 66666 66666 </div>
</div>(Still learning, so feel free to suggest any additional information!)