Make flex items expand to full width of a row, but all stay the same size in another

Question

So basically, what I have here is a contact page, that shows each contact's info inside a card. It's basically flex container with flex items. I want cards to expand to full width of a first row (5 cards in a row on desktop). I have managed to achieve that but what I want to have is to have all the cards be the same width. For example if user has 7 contacts, first 5 cards will be displayed in a first row nicely, but second two will expand to take the full width of the second row. Is it possible to make those cards the same width as others?

<div class="d-flex flex wrap">
  <div class="contact-card">
  <div>
  <div class="contact-card">
  <div>
  <div class="contact-card">
  <div>
  <div class="contact-card">
  <div>
  <div class="contact-card">
  <div>
</div>

.contact-card {
   flex: 1 1 0;
}

Jakub Muda · Answer 1 · 2019-09-06T02:22:17.787

It looks like a straight forward Bootstrap layout. I copied CSS from Bootstrap CSS.

You can adjust width (and consequently number of columns) in a row by setting flex:0 0 16.666667% and max-width: 16.666667%; to custom values.

.row {
  display: flex;
  flex-wrap: wrap;
}
.col-2 {
  width: 100%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

/*DEMO*/
*,*::before,*::after{box-sizing:border-box}
.col-2{height:80px;border:1px red solid}

<div class="row">
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
</div>

Make flex items expand to full width of a row, but all stay the same size in another

1 Answers1