html - 如何在 "float:left"时修复父中心的 div 子项？

Question

我试图将子 div 置于父 div 的中心。子 div 的数量是动态的，我制作“ float :左”。但是一组子 div 不能在父 div 中居中。 父div静态宽度:800px； 子div静态宽度:360px；高度:320px。

这是我的代码:

* {
  box-sizing: border-box;
}

.parent {
  width: 800px;
  display: flex;
  justify-content: center;
  background-color: #f8f9fb;
}

.child {
  width: 360px;
  margin: 7px;
  min-width: 360px;
  height: 320px;
  float: left;
  background-color: #FFFF;
  border: 1px solid;
}

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

我引用了一些方法但不是我的例子:
- http://jsfiddle.net/h9H8w/12/
- https://dev.to/stel/a-little-trick-to-left-align-items-in-last-row-with-flexbox-230l
- https://codepen.io/anon/pen/JbpPKa

我的结果是这样的:
- https://imgur.com/TX9I4vq
- https://imgur.com/NiRaHgj

感谢阅读，抱歉我的英语不好。

============================================= =========

来自@kukkuz 的帮助。我更改了我的代码:

 * {
        box-sizing: border-box;
    }
    .parent {
        max-width: 800px; 
        display: grid;
        justify-content: center;
        background-color: #f8f9fb;          
        grid-template-columns: repeat( auto-fit, 360px);
        grid-gap: 7px;
    }

.child {
    width: 360px;
    /*margin: 7px;*/
    min-width: 360px;
    height: 320px;
    /*  float: left;*/
    background-color: #FFFF;
    border: 1px solid;
}


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

Answer 1

这是你想要的吗 基本上我删除了 float:left 和 content div

justify-content: center; 将处理框的居中，

取消注释 flex-wrap:wrap; 将 child 换到下一行

要知道，制作一个 div display:flex 会使它的子项成为 flex 元素，这在您的情况下不会发生

* {
  box-sizing: border-box;
}

.parent {
  width: 800px;
  display: flex;
  justify-content: center;
  background-color: #f8f9fb;
  /*flex-wrap:wrap;*/
}

.child {
  width: 36px;
  margin: 7px;
  min-width: 36px;
  height: 32px;
  background-color: #FFFF;
  border: 1px solid;
}

<div class="parent">

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


</div>