max 3 divs per row with flexbox each same width even when only 1 or 2 divs

Question

Im stuck with creating a div containing a various number of max 3 divs per row with flexbox. If a row contains only one or two divs the script stretches them to fit the remaining width but i want them to be all structured inline under each other.

The less important problem is that the picture div is a little wider than the items-div

https://jsfiddle.net/bk3ctapb/

body{  
margin: 0;
}
.wrapper {
  width: 500px;
  display: flex;
  height: 200px;
  margin: 0 auto;
  align-items: flex-start; 
}
.main_content {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}
.first {
  border-style:solid;
  background-color:blue;
  width: 100%;
}
.item{
  flex: 1; 
  margin: 0 0px; 
  min-width: calc(100% * (1/4) - 1px);
  margin-right:10px;
  border-style:solid;
  height: 30px;
  }
.items{
  flex: 1; 
  display: flex; 
  flex-wrap: wrap; 
  align-content: flex-start;
 }
.items * {
  box-sizing: border-box;  
}
.content_4{
  height:200px;
  width:20px;
  background-color: red;
  flex: 1;
  margin-left: 10px;
}

<div class="wrapper">
        <div class="main_content">
           <div class="first">PICTURE</div>
           <div class="items">
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
           </div>
        </div>
        <div class="content_4">CONTENT_4</div>
 </div>

https://stackoverflow.com/q/42176419/3597276 – Michael Benjamin Jan 21 '18 at 21:29 — Michael Benjamin, Jan 21 '18 at 21:29

Asons · Accepted Answer · 2018-01-21T21:42:40.227

Since you have 3 in a row, instead of flex: 1, use flex-basis: calc(33.333% - 10px);, where the 10px is for the right margin.

Stack snippet

body{  
margin: 0;
}
.wrapper {
  width: 500px;
  display: flex;
  height: 200px;
  margin: 0 auto;
  align-items: flex-start; 
}
.main_content {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}
.first {
  border-style:solid;
  background-color:blue;
  width: 100%;
}
.item{
  flex-basis: calc(33.333% - 10px); 
  margin: 0 0px; 
  min-width: calc(100% * (1/4) - 1px);
  margin-right:10px;
  border-style:solid;
  height: 30px;
  }
.items{
  flex: 1; 
  display: flex; 
  flex-wrap: wrap; 
  align-content: flex-start;
 }
.items * {
  box-sizing: border-box;  
}
.content_4{
  height:200px;
  width:20px;
  background-color: red;
  flex: 1;
  margin-left: 10px;
}

<div class="wrapper">
        <div class="main_content">
           <div class="first">PICTURE</div>
           <div class="items">
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
           </div>
        </div>
        <div class="content_4">CONTENT_4</div>
 </div>

If to also match the first element (align at both its left/right), do like this, where you give every 2nd and 3rd element on each row a left margin.

Stack snippet

body{  
margin: 0;
}
.wrapper {
  width: 500px;
  display: flex;
  height: 200px;
  margin: 0 auto;
  align-items: flex-start; 
}
.main_content {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}
.first {
  border-style:solid;
  background-color:blue;
  width: 100%;
}
.item{
  flex-basis: calc(33.333% - 10px); 
  margin: 0 0px; 
  min-width: calc(100% * (1/4) - 1px);
  border-style:solid;
  height: 30px;
  }
.item:nth-child(3n+2),
.item:nth-child(3n+3) {           /*  every 3rd element, start at 2nd and 3rd  */
  margin-left:15px;               /*  10px per item, divide with 2 gaps  */
  }
.items{
  flex: 1; 
  display: flex; 
  flex-wrap: wrap; 
  align-content: flex-start;
 }
.items * {
  box-sizing: border-box;  
}
.content_4{
  height:200px;
  width:20px;
  background-color: red;
  flex: 1;
  margin-left: 10px;
}

<div class="wrapper">
        <div class="main_content">
           <div class="first">PICTURE</div>
           <div class="items">
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
           </div>
        </div>
        <div class="content_4">CONTENT_4</div>
 </div>

max 3 divs per row with flexbox each same width even when only 1 or 2 divs

1 Answers1