CSS flex - 项目左对齐，容器居中

Question

是否可以使用 display: flex; 将所有项目左对齐 (flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;) 但容器本身居中（如 margin: 0 auto;）？

似乎 flex-containers 总是缩放到 100% 宽度，为什么自动边距不起作用。有人知道如何实现我的尝试吗？

.container {
    width: auto;
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox; // IE10 uses -ms-flexbox
    display: -ms-flex; // IE11
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
}
.item {
    display: block;
    width: 220px;
}

编辑：重要！ 虽然容器具有自动宽度！

Answer 1

对于parent，可以使用display: inline-flex，与display: block相比，与display: inline-block效果相同。 flex 将不再占用整个页面宽度。您可以在此处找到有关 flex 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

是的，在 parent（或正文）和 display:inline-flex 上使用 text-align:center 而不是 display:flex。

这与 display:inline-block 和 display:block 之间的区别非常相似。

MDN 说：

The element behaves like an inline element and lays out its content according to the flexbox model.

body {
  background: #eee;
  text-align: center;
}
.inner {
  display: inline-flex;
  width: auto;
  /* stated but not required */
  background: #ccc;
  padding: 15px;
}
p {
  padding: 15px;
  border: 1px solid red;
}

<div class="inner">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

CSS flex - 项目左对齐，容器居中

CSS flex - Align items to left, and container to center

html

css

flexbox