将项目对齐到左侧，将容器对齐到中间
是否有可能使用display: flex; 将所有项目对齐到左侧（ flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; ），但它自身到中心的容器（如margin: 0 auto; ）？
Flex容器似乎总是被缩放到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;
}
编辑： 重要！ 虽然容器具有自动宽度！
是的，使用text-align:center父母（或身体）和display:inline-flex而不是display:flex 。
这与display:inline-block和display:block之间的区别非常相似。
MDN表示：
该元素的行为与内联元素相似，并根据Flexbox模型布局其内容。
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> 父，则可以使用display: inline-flex ，其具有相同的效果display: inline-block相比display: block 。 Flex不会再声称整个页面宽度。 你可以在这里找到更多关于flex的信息：https：//css-tricks.com/snippets/css/a-guide-to-flexbox/