使用 flexbox 居中多个面板答案

【问题标题】：center multiple panels with flexbox使用 flexbox 居中多个面板
【发布时间】：2018-02-26 20:52:48
【问题描述】：

我目前有一组面板，当它们在全屏时正确居中，当它们处于小分辨率时，它们不是。基本上我有一个容器，里面有大约 7 个面板：

<div class"container">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
</div>

我创建了一个代码笔以全屏显示它的外观： https://codepen.io/r3plica/pen/XemvyW?editors=0100

在小分辨率（即移动设备）下，它看起来像这样： https://codepen.io/r3plica/pen/eGJOJN?editors=0100

我在第二个 codepen 上将背景颜色设为粉红色。我希望项目在第二支笔中居中而不影响它在大型结果中的外观。

有谁知道我如何做到这一点？

【问题讨论】：

相关如果不重复 - stackoverflow.com/questions/32802202/…
不是重复的，他们需要的布局和我的不一样
因此我使用了“相关”。不过这个问题本质上是一样的。
他们不是，他可以解决他使用 flexbox 的问题。我不能

标签： html css flexbox

【解决方案1】：

好的，我做到了：

https://codepen.io/r3plica/pen/OxMyPL?editors=0100#0

我所做的只是去掉面板容器上的 flexbox 并更新 persona-panels 以使用 calc 的边距，如下所示：

.persona-panels {
    > div {
        .panel {
            vertical-align: top;
            display: inline-block;
            margin: 7.5px calc((100% - #{$persona-panel-width}) / 2);

            @include large-width {
                margin: 7.5px;
            }
        }
    }
}

【讨论】：

【解决方案2】：

在 flex-container 中有一个 ng-scope 类的 div。它阻止代码有效/工作。从 html 中删除它或使其成为您的 flex 容器。这就是您的代码实际的样子：

<div class="container">
   <div class="ng-scope DELETE THIS DIV">
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
   </div>
</div>

然后在 css 中从第 222 行删除 inline-block ，它将居中。然后将flex-flow: row wrap 添加到 .persona-panels。

【讨论】：

【解决方案3】：

更改面板上的display 属性会搞砸。

Flexbox 的 display 属性的工作方式不同，它也改变了子项，然后子项变成了弹性项目。

不过，根据this 的回答，只使用inline-block 更实用。

【讨论】：

【解决方案4】：

您必须从 .panel 中删除此属性。那么它会正常工作

display-inline-block

【讨论】：

不，它不会，因为它只会强制它们全部进入 1 列
此解决方案不起作用。它破坏了全屏的布局。其次，不是display-inline-block，而是display: inline-block。
原始发帖人在他的原始问题中给出了他的代码的链接。