My objective with flexbox was to evenly distribute the text across the width of the page. When I say 'evenly distributed', I mean:
If there are 3 sections, the center of the text in each section should be at fifths of the webpage width.
This is how I managed to accomplish this:
footer {
display: flex; flex-wrap: wrap;
color: white;
padding-left: 100px;
background-color: grey;
}
footer > * {
flex-basis: 0px;
flex-grow: 1;
padding-right: 50px;
display: flex; justify-content: center; align-items: center;
}
footer > *:nth-child(1) {
background-color: red;
}
footer > *:nth-child(2) {
background-color: green;
}
footer > *:nth-child(3) {
background-color: blue;
}<footer>
<section>
<div>one.</div>
</section>
<section>
<div>two.</div>
</section>
<section>
<div>three.</div>
</section>
</footer>Excellent.
Now, my issue arises when wrapping occurs and the newly wrapped section looks misaligned - the text centers in the middle of the page. (This happens because the flex-grow: 1 property of the section/flex-item causes it to span the page width and applies justify-content center. My current solution?) Introduce a media query, at an estimated vw, to set the flex-item to use justify-content: initial:
footer {
display: flex; flex-wrap: wrap;
color: white;
padding-left: 100px;
background-color: grey;
}
footer > * {
flex-basis: 0px;
flex-grow: 1;
padding-right: 50px;
display: flex; justify-content: center; align-items: center;
}
footer > *:nth-child(1) {
background-color: red;
}
footer > *:nth-child(2) {
background-color: green;
}
footer > *:nth-child(3) {
background-color: blue;
}
@media screen and (max-width: 400px) {
footer > * {
justify-content: initial;
}
}<footer>
<section>
<div>one.</div>
</section>
<section>
<div>two.</div>
</section>
<section>
<div>three.</div>
</section>
</footer>It's...not ideal. The problem is we lose the justify-content: center property that perfectly distributes text along the width of the page.
But let's get straight to the point: what I really desire is a kind of 'flexible' grid where all rows below the first row have the same number and dimensions of columns as the first row. This would resolve my dilemma.
What have people's experiences been like trying to achieve this?