html - 每行最多 3 个 div，即使只有 1 或 2 个 div，Flexbox 的宽度也相同

Question

我一直坚持使用 Flexbox 创建一个每行最多包含 3 个 div 的 div。如果一行仅包含一个或两个 div，脚本会拉伸(stretch)它们以适应剩余宽度，但我希望它们全部结构化为彼此内联。

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

Answer 1

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

堆栈片段

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>

---

如果还想匹配第一个元素(在其左/右对齐)，请这样做，为每行的第二个和第三个元素提供左边距。

堆栈片段

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>