CSS FLEXBOX：如何在justify-content：网格之间的空格

Question

我有一个样式如下的父div：

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;

该div的每个孩子都有：

flex: 0 1 32%;

如果我有三个子div，则如下所示：

那很好。这是小提琴https://jsfiddle.net/2sc7amL1/1/

但是问题是，当我只有子元素时，我就有以下内容

这是小提琴https://jsfiddle.net/2sc7amL1/2/

如果只有两个子div保持与照片对齐的方式，该如何使用flex

Answer 1

添加justify-content：将flex-start添加到父类名。如果子div之间需要空格，请为子元素添加边距。

.parent{
    justify-content: flex-start;
}
.child:nth-child(even){
    margin: 0 20px;
}

这是您的https://jsfiddle.net/v8wnruxc/1/

的编辑内容

Answer 2

检查:last-child是否也是:nth-child(2)。在这种情况下，请更改元素的边距

.parent{
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%; 
    background-color: yellow;
}

.child{
  flex: 0 1 32%;
  background-color: red;
  height: 400px;
}

.parent > div:last-child:nth-child(2) {
  margin: 0 auto 0 2%;
}

<div class="parent">
  <div class="child">
    Child
  </div>
  
  
  <div class="child">
    Child
  </div>
</div>


<br /> <br />

<div class="parent">
  <div class="child">
    Child
  </div>
  
  <div class="child">
    Child
  </div>
  
  <div class="child">
    Child
  </div>
</div>

Answer 3

如果您不希望justify-content: flex-start像其他答案一样。您想要的技术可能是：

.parent::after {
  content: '';
  flex: 0 1 32%;
}

尝试下面的代码，分别包含2个和3个孩子。技术来源：https://haizdesign.com/css/flexbox-align-last-item-grid-left/

.parent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%; 
  background-color: yellow;
}

.parent::after {
  content: '';
  flex: 0 1 32%;
}

.child{
  flex: 0 1 32%;
  background-color: red;
  height: 400px;
}

<div class="parent">
  <div class="child"> Child </div>
  <div class="child"> Child </div>
  <div class="child"> Child </div>
</div>

<div class="parent">
  <div class="child"> Child </div>
  <div class="child"> Child </div>
</div>

Answer 4

也许是这样吗？

.parent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;;
  width: 100%; 
  background-color: yellow;
}

.child{
  flex: 0 1 32%;
  margin: 0 0.5%;
  background-color: red;
  height: 400px;
}
.child:nth-child(3n) {   flex-grow: 1;} /* fix as for comment */

此处摘录：

.parent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;;
  width: 100%; 
  background-color: yellow;
}

.child{
  flex: 0 1 32%;
  margin: 0 0.5%;
  background-color: red;
  height: 400px;
}
.child:nth-child(3n) {   flex-grow: 1;}

<div class="parent">
  <div class="child">
    Child 1
  </div>      
  
  <div class="child">
    Child 2
  </div>
  
  <div class="child">
    Child 3
  </div>

  <div class="child">
    Child 4
  </div>
    
  <div class="child">
    Child 5
  </div>
  
  <div class="child">
    Child 6
  </div>
</div>

This link对于获取所有可能性很有帮助。

Answer 5

.parent > div:last-child:nth-child(2) {
  margin:0 auto 0 30px;
 }

您也可以使用nth-child