父 div 对齐内容：中心，最后一个子对齐：左 [重复]

Question

我正在尝试将父 div 中的所有子 div 居中对齐。如果我将display: flex; 和justify-content: center; 放在我的<parent-div> 上，它就会起作用

但问题是 - 我希望最后一个子 div 与左对齐。 但是justify-content: center; 将最后一个<child-div> 对齐在中心。

我尝试从<parent-div> 中删除justify-content: center;，并添加margin: 0px 8px; 以获得预期的输出。但是，它没有响应。

.parent-div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* margin: 0px 8px; */
  justify-content: center;
}
.child-div {
  border: 1px dotted indianred;
  height: 222px;
  width: 156px;
}

<div class = "parent-div">
    <div class = "child-div">
        I am child 1
    </div>
    <div class = "child-div">
        I am child 2
    </div>
    <div class = "child-div">
       I am child 3
    </div>
</div>

Answer 1

尝试删除justify-content并指定父div的width。

.parent-div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border:1px solid;
  width: 316px;
  margin: 0 auto;
}
.child-div {
  border: 1px dotted indianred;
  height: 222px;
  width: 156px;
}

<div class="parent-div">
  <div class="child-div">
    I am child 1
  </div>
  <div class="child-div">
    I am child 2
  </div>
  <div class="child-div">
    I am child 3
  </div>
</div>

Answer 2

只需在最后一项上应用一条魔术线margin-right: auto

.parent-div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* margin: 0px 8px; */
  justify-content: center;
}
.child-div {
  border: 1px dotted indianred;
  height: 222px;
  width: 156px;
}
.child-div:last-child{
  border: 1px dotted blue;
  margin-right: auto 
}

<div class = "parent-div">
    <div class = "child-div">
        I am child 1
    </div>
    <div class = "child-div">
        I am child 2
    </div>
    <div class = "child-div">
       I am child 3
    </div>
    <div class = "child-div">
       I am child 4
    </div>
</div>