css：居中一组均匀分布在该组内的对象答案

【问题标题】：css: center a group of objects that are evenly distributed within that groupcss：居中一组均匀分布在该组内的对象
【发布时间】：2017-09-25 09:34:24
【问题描述】：

我在一个容器中有一堆 div，我想水平分布：

[container [obj1] [obj2] [obj3] [obj4] ]

但我也希望容器在页面中居中

现在我的容器 css (stylus) 代码如下所示：

@media( min-width: 900px ) {
                display: flex;
                width: 830px;
                margin 0 auto;
                justify-content: space-between;
            }

这会导致一些奇怪的边距并且容器不在页面中居中。这是因为我使用 display:flex 和 'justify-content` 字段的方式吗？

【问题讨论】：

您能否添加一个显示奇怪边距的工作示例？
您的方法看起来不错 IMO。只需在margin 之后添加一个冒号即可。
@jfeferman 最好的传输方式是什么？像 codepen 这样的东西可能无法最好地传达我具体遇到的渲染问题。
您可以编辑您的问题并包含一个代码 sn-p。只需在编辑器中按代码按钮。
我发现的是，当我手动设置宽度时，它会在两侧添加正确的边距，但块的边距太宽，整个块缩进离开页面的宽度。如果我不考虑手动宽度，它会以页面为中心，两边都没有边距。

标签： html css flexbox stylus

【解决方案1】：

如果您想将.container 居中，您可以再次在其父对象上添加display: flex，并使用align-items: center 和justify-content: center 将容器居中，如下所示：

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background: yellow;
}

.container {
  display: flex;
  border: 1px solid;
  width: 70%;
  height: 20%;
  align-items: center;
  justify-content: space-between;
}

.child {
  background: red;
  border: 1px solid;
  padding: 6px;
  margin: 0 6px;
}

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

【讨论】：

【解决方案2】：

以450px 容器为例。正如您所建议的，正确使用 justify-content:space-between 可以在 div 元素之间提供均匀的间距。

.container {
  display: flex;
  width: 450px;
  height: 50px;
  margin: 0 auto;
  padding: 2px;
  border: 1px solid black;
  justify-content:space-between;
}

.container div {
  border: 1px solid red;
  margin: 4px;
}

<div class="container">
  <div>1</div>
  <div>small</div>
  <div>very large content</div>
</div>

现在，假设您希望扩展每个 div 以占用所有剩余空间，并使 div 元素均匀分布。在子 div 元素上使用 flex-grow:1 以使它们占据剩余空间。添加width:calc(100%/3) 以均匀调整它们的大小。

.container {
  display: flex;
  width: 450px;
  height: 50px;
  margin: 0 auto;
  padding: 2px;
  border: 1px solid black;
  justify-content:space-between;
}

.container div {
  border: 1px solid red;
  margin: 4px;
  flex-grow:1;
  width:calc(100%/3);
}

<div class="container">
  <div>1</div>
  <div>small</div>
  <div>very large content</div>
</div>

最后，要在媒体查询中实现这一点，您需要按如下方式调整 CSS：

@media( min-width: 450px) {
  .container {
    display: flex;
    width: 400px;
    margin: 0 auto;
    justify-content: space-between;
  }
  .container div {
    border: 1px solid red;
    margin: 4px;
    flex-grow: 1;
    width: calc(100%/3);
  }
}

<div class="container">
  <div>1</div>
  <div>small</div>
  <div>very large content</div>
</div>

【讨论】：