如何居中对齐 flexbox 容器？

Question

如代码片段所示，我成功创建了一个响应式网格。

此刻，我看到盒子向左对齐。

如何在不使用填充的情况下将容器放在页面中央？

我尝试使用 margin:auto 但它没有用。

 .container{
    display:flex;
    flex-wrap:wrap;
    text-align:center;
    margin:auto;
}
.box{
    width:100%;
    max-width:30%;
    border:1px solid red;
    margin:5px;
}
@media only screen and ( max-width:768px ){
    .box{
        width:100%;
        max-width:40%;
        border:1px solid red;
    }
}

 <section class="container">
    <div class="box">
        <h1>This is the first box</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam.</p>
    </div>
</section>

JS小提琴。

原文由 user agent 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 justify-content: center; 而不是 margin: auto; ：

 .container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}
.box {
   width: 100%;
   max-width: 30%;
   border: 1px solid red;
   margin: 5px;
}
@media only screen and (max-width: 768px) {
  .box {
    width: 100%;
    max-width: 40%;
    border: 1px solid red;
  }
}

请参阅 justifiy-content MDN 上的文档。

更新了 JS 小提琴。

原文由 Michał Perłakowski 发布，翻译遵循 CC BY-SA 3.0 许可协议