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

【问题标题】：CSS flex - Align items to left, and container to centerCSS flex - 将项目左对齐，容器居中
【发布时间】：2016-02-19 02:26:32
【问题描述】：

是否可以使用display: flex; 将所有项目向左对齐（@987654324@），但将容器自身对齐到中心（如margin: 0 auto;）？

似乎弹性容器总是缩放到 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;
}

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

【问题讨论】：

请发布您的代码。
这样的？ jsfiddle.net/smaye81/hvtz1j1s
好吧，现在我们知道了，flex 允许我们设置容器的宽度。不幸的是，我想要一个自动宽度（根据弹性框内的项目）。不过还是谢谢你
Center flex container but align left flex items的可能重复

标签： html css flexbox

【解决方案1】：

是的，在父级（或正文）上使用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>

【讨论】：

您可以使用justify-content: center 将外部保持为display: flex，这样您就可以使用所有其他 flex 属性来修改内部，并且您也可以将内部保持为 flex .

【解决方案2】：

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

【讨论】：