如何用空格来证明内容的合理性并且让所有内容都居中？

Question

我遇到了 flexbox 的问题。

我有一个最大宽度为 920 像素的 div。 我希望内容框从左到右填充 div 到最大可能宽度，并且所有内容都具有相等的边距。 当屏幕尺寸下降到每行一个框时，我希望该框位于屏幕中央。

这是正在运行的网站：http: //javinladish.com/code/index.html

如果我使用：

justify-content: center;

然后这些框不会填满最大宽度。

如果我使用：

justify-content: space-between;

然后当我下降到每行一个盒子时，盒子不会保持居中。

我怎样才能在两者之间取得愉快的平衡？ 即填充容器的最大宽度，并保持所有内容居中？

Answer 1

最好的解决方案是使用margin: auto; 弹性项目水平边距如下：

 .flexbox { background-color: pink; display: flex; justify-content: space-between; flex-wrap: wrap; } .flex-item { width: 175px; height: 175px; background-color: grey; margin: 10px auto; }

 <div class="flexbox"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>

唯一的问题可能是如果最后一行有多个项目但不足以填满整行，则最后一行项目之间会有很多空间。

Answer 2

似乎你同时追求两种行为。 我已经成功使用justify-content: center和flex-wrap: wrap在容器上，并在子元素上设置适当的左右边距。 然后在容器上应用与负边距相同的数量，孩子的边缘将与容器对齐。

.parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -3rem;
}

.child {
    align-self: center;
    margin: 0 3rem 6rem 3rem;
}

Answer 3

justify-content: space-between; 将始终将项目推到每行容器的最边缘。 另一行上的任何元素永远不会居中。

我在负边距方面取得了成功，但这意味着您明确设置了这些边距：

JS 小提琴示例

HTML

<div class="grid">
  <div class="grid__elem">
    TEST 1
  </div>
  <div class="grid__elem">
    TEST 2
  </div>
  <div class="grid__elem">
    TEST 3
  </div>
  <div class="grid__elem">
    TEST 4
  </div>
  <div class="grid__elem">
    TEST 5
  </div>
  <div class="grid__elem">
    TEST 6
  </div>
  <div class="grid__elem">
    TEST 7
  </div>
</div>

SCSS

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-left: -2%;
  &__elem {
    width: 18%;
    background: red;
    color: white;
    margin: 0 0 2% 2%;
  }
}

还有一个选项可以通过align-self来定位特定元素，但我发现这在工作示例中没有用。 请参阅此链接。

Answer 4

在你有justify: space-beween;的父div上justify: space-beween; 您还想包括： align-items: center;

所以你可以像这样写：

.navbar-wrapper {
    display: flex;
    flex-direction: row;
    justify: space-between;
    align-items: center;
}

Answer 5

另一种方法是让所有子元素居中的flex父元素，然后使用margins将它们分开。

如果您想为每个元素创建独立的边距，只需为每个元素创建一个特定的类。

 .box{ display:flex; justify-content:center; } .box > div{ margin: 5px 20px 5px 20px; }

 <div class='box'> <div>[item one]</div> <div>[item two]</div> <div>[item three]</div> </div>

Answer 6

试试这个：

Codepen

.main-content {

    display: flex;
    margin: auto;
    width: 500px;
    flex-wrap: wrap;
    justify-content: space-between;


        &__item {
            flex-shrink: 0;
            height: 150px;
            width: 30%;
            background: transparent;
            border: 1px solid #000;
            margin-bottom: 20px;

            &:last-child {
                margin: auto;
            }
        }

}

Answer 7

justifyContent: 'space-around'

资源： https ://tproger.ru/translations/how-css-flexbox-works/

Answer 8

解决方案是在每个项目上设置相同的宽度，以便它们占据相同的空间，然后它们将按照您的意愿居中。