Using flex to align items that have flex already? - html

Question

I am trying to have a container with many child tiles of content inside. Each child tile contains data that I want centered so that is why flex is on the child -- so that I can align the tile content.
I want to align 3 to a line evenly so I put flex on the parent class and wanted to space-evenly but that doesn't seem to work. Any ideas on what I am doing wrong?
<div class="container">
<div class="child">
<img src="">
<span>TITLE</span>
</div>
<div class="child">
<img src="">
<span>TITLE</span>
</div>
<div class="child">
<img src="">
<span>TITLE</span>
</div>
<div class="child">
<img src="">
<span>TITLE</span>
</div>
<div class="child">
<img src="">
<span>TITLE</span>
</div>
<div class="child">
<img src="">
<span>TITLE</span>
</div>
<div class="child">
<img src="">
<span>TITLE</span>
</div>
</div>
CSS
.parent {
display: flex;
max-width: 1200px;
}
.child {
display: inline-flex;
margin-bottom: 26px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 396px;
height:396px;
}

Answer 1

You had a few key things missing. Number one, your parent container was missing the class parent so that CSS never hit its target. Opening tag is now:
<div class="container parent">
Next I added an important flex property to the .parent CSS rule, allowing the items to wrap, otherwise theres no way you can get 3-across with more than 3 items:
flex-wrap: wrap;
Adding space-between to .parent makes sure the items go edge to edge regardless of the width and space between items:
justify-content: space-between;
Then I added a width to the .child elements that is flexible that creates the 3-across layout. I used calc as a quick way to get some space between the elements instead of them touching horizontally:
width: calc(33.333% - 20px);
Also threw little images in there to see more of the inner flex effect too. Hope this helps!
.parent {
display: flex;
max-width: 1200px;
justify-content: space-between;
flex-wrap: wrap;
}
.child {
display: flex;
margin-bottom: 26px;
flex-direction: column;
justify-content: center;
align-items: center;
width: calc(33.333% - 20px);
background-color: #ccc;
}
<div class="container parent">
<div class="child">
<img src="https://picsum.photos/40">
<span>TITLE 1</span>
</div>
<div class="child">
<img src="https://picsum.photos/40">
<span>TITLE 2</span>
</div>
<div class="child">
<img src="https://picsum.photos/40">
<span>TITLE 3</span>
</div>
<div class="child">
<img src="https://picsum.photos/40">
<span>TITLE 4</span>
</div>
<div class="child">
<img src="https://picsum.photos/40">
<span>TITLE 5</span>
</div>
<div class="child">
<img src="https://picsum.photos/40">
<span>TITLE 6</span>
</div>
<div class="child">
<img src="https://picsum.photos/40">
<span>TITLE 7</span>
</div>
</div>