Question

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

我在第二个编码器上使背景颜色变为粉红色。我希望这些项目以第二支笔为中心，而不会影响它在大型结果中的外观。

有谁知道我怎么做到这一点？

Answer 1

好的，我设法了：

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

我所做的就是摆脱面板容器上的flexbox并更新角色面板以使用带有 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;
            }
        }
    }
}

Answer 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。

Answer 3

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

Flexbox的display属性的工作方式不同，因为它也会更改子项，然后子项成为弹性项。

根据this的答案，使用inline-block更实际。

Answer 4

您必须从.panel中删除此属性的属性。然后它会正常工作

display-inline-block

使用flexbox

4 个答案: