CODEWITHSUNDEEP
cssflexbox
user13286
user13286

Reputation: 3075

Flexbox limit items per row without the width of the child elements changing

I have created a layout with Flexbox. I have a parent element set to display:flex and up to 7 child elements. What I would like to do is configure it so that there are only 4 child elements max per row. So in the case that there was 7 child elements, there would be 4 in the first row and 3 in the second, all centered. Here's what I have tried:

.parent {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
  .child {
    width:65px;
    height:65px;
    border-radius:50%;
    overflow:hidden;
    flex:0 0 25%;
  }
<div class="container">
  <div class="parent">
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
  </div>
</div>

This is almost working, except that the width of 65px is being ignored. How can I make it so that the width is not exceeded and the child elements have the same amount of space between them in both rows?

Upvotes: 0

Views: 1931

Answers (2)

Temani Afif
Temani Afif

Reputation: 273571

Consider a hidden element that will separate between the first and second row and make it width:100% then simply use space-around or space-evenly

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.child {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
}

.parent:before {
  content: "";
  width:100%;
  order: 1;
}

.child:nth-child(n + 5) {
  order: 2;
}
<div class="container">
  <div class="parent">
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
  </div>
</div>

Upvotes: 1

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

You need a separate CSS rule for the image inside the .child divs. Then move the properties targeting the image to that new rule:

.child img {
  border-radius: 50%;
  width: 65px;
  height: 65px;
}

I added some flexbox rules to the .child divs to center the image inside .child. Now the .child divs are just concerned with dividing the space up so there are always 4 across and the styling of the images is independent of that.

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  flex: 0 0 25%;
  
  /*for aligning image inside .child */
  display: flex;
  justify-content: center;
}

.child img {
  border-radius: 50%;
  width: 65px;
  height: 65px;
}
<div class="container">
  <div class="parent">
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
  </div>
</div>

Upvotes: 1

Related Questions