CODEWITHSUNDEEP
htmlcssflexbox
Yerke
Yerke

Reputation: 2215

CSS make flex wrapped elements not exceed their siblings width

I'm stuck on problem with stretching flexes. I have flexbox div with items. These items can stretch to full width and have min-width property, so that 3-4 elements can fit in large screens, and 1-2 in small. I want to make their widths equal, but the problem is that wrapped items are wider if their quantity is less than on top elements.

Attached below my current result and expected behavior. How can I make it? enter image description here

.items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  min-width: 400px;
  border: 1px solid black;
  margin: 0;
  height: 200px;
  flex-grow: 1;
}
<div class="items">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>

Thanks!

Update 02.05.2016

Thanks to @vals I came up with percentage width solution for different screen sizes. (But it seems I'm having some tiny problem with 33% width elements, in which 1% empty space is left around them xD)

.items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}

@media only screen and (max-width: 820px)  {
  .item {
    width: 100%;
  }
}

@media only screen and (min-width: 821px) and (max-width: 1220px)  {
  .item {
    width: 50%;
  }
}

@media only screen and (min-width: 1221px) and (max-width: 1620px)  {
  .item {
    width: 33%;
  }
}

@media only screen and (min-width: 1621px) and (max-width: 2020px)  {
  .item {
    width: 25%;
  }
}

.item {
  box-sizing: border-box;
  border: 1px solid black;
  margin: 0;
  height: 200px;
}
<div class="items">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>

Upvotes: 11

Views: 13768

Answers (1)

vals
vals

Reputation: 64164

This is a complex case, you need media queries adapted to you specific layout and number of elements present.

I have color-coded the different media queries result to help identify them

And also, three extra divs inside the items element to help with the dimensions

.items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  min-width: 400px;
  border: 1px solid black;
  margin: 0;
  height: 100px;
  flex-grow: 2;
}

.filler1, .filler2, .filler3 {
  height: 0px;
  background-color: lightgreen;
}

@media only screen and (max-width: 820px)  {
  /* one item per line */
  .filler2, .filler3 {display: none;}
  .item {background-color: yellow;}
}

@media only screen and (min-width: 821px) and (max-width: 1220px)  {

    /* 2 items per line */

    .item:nth-last-child(4) {
        order: 9;
        background-color: red;
    }
    .filler1 {
      margin-right: 100%;
    }
    .filler2 {
      min-width: 200px;
      flex-grow: 1;
      order: 4;
    }
    .filler3 {
      min-width: 200px;
      flex-grow: 1;
      order: 14;
    }
}

@media only screen and (min-width: 1221px) and (max-width: 1620px)  {

    .item:nth-last-child(4), .item:nth-last-child(5) {
        order: 9;
        background-color: green;
    }
    .filler1 {
      margin-right: 100%;
    }
    .filler2 {
      min-width: 200px;
      flex-grow: 1;
      order: 4;
    }
    .filler3 {
      min-width: 200px;
      flex-grow: 1;
      order: 14;
    }
}

@media only screen and (min-width: 1621px) and (max-width: 2020px)  {

    .item:nth-last-child(4) {
        order: 9;
        background-color: lightblue;
    }
    .filler1 {
      margin-right: 100%;
    }
    .filler2 {
      min-width: 400px;
      flex-grow: 2;
      order: 4;
    }
    .filler3 {
      min-width: 400px;
      flex-grow: 2;
      order: 14;
    }
}
<div class="items">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
    <div class="filler1"></div>
  <div class="filler2"></div>
  <div class="filler3"></div>
</div>

Upvotes: 3

Related Questions