Using flex to align items that have flex already?

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;
}

This might help: https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row — Billy Moat, Mar 12 '19 at 15:48

score 1 · Answer 1 · answered Mar 14 '19 at 01:24

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>

Using flex to align items that have flex already?

1 Answers1