每行最多 3 个 div，即使只有 1 或 2 个 div，flexbox 的宽度也相同答案

【问题标题】：max 3 divs per row with flexbox each same width even when only 1 or 2 divs每行最多 3 个 div，即使只有 1 或 2 个 div，flexbox 的宽度也相同
【发布时间】：2018-06-30 12:14:59
【问题描述】：

我坚持使用 flexbox 创建一个包含不同数量的每行最多 3 个 div 的 div。如果一行只包含一个或两个 div，则脚本会拉伸它们以适应剩余的宽度，但我希望它们都是结构化的内联。

不太重要的问题是图片div比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>

【问题讨论】：

stackoverflow.com/q/42176419/3597276

标签： html css flexbox

【解决方案1】：

由于您连续有 3 个，而不是 flex: 1，请使用 flex-basis: calc(33.333% - 10px);，其中 10px 表示右边距。

堆栈sn-p

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>

如果还要匹配 first 元素（在其左/右对齐），请执行以下操作，即为每行上的每个第 2 和第 3 个元素指定一个左边距。

堆栈sn-p

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>

【讨论】：