Question

我遇到了flexbox的问题。

我有一个最大宽度为920px的div。我希望内容框从左到右填充div到最大可能宽度，所有内容都具有相同的边距。当屏幕尺寸下降到每行一个盒子时，我希望该盒子在屏幕上居中。

以下是正在使用的网站：http://javinladish.com/code/index.html

如果我使用：

justify-content: center;

然后这些方框没有填满最大宽度。

如果我使用：

justify-content: space-between;

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

如何在两者之间取得平衡？即填充容器的最大宽度，并保持所有内容居中？

提前感谢您的帮助。

Answer 1

最佳解决方案是在弹性项目水平边距上使用margin: auto;，如下所示：

＆＃13;

    .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;
    }

＆＃13;

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

＆＃13;

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

Answer 2

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

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

JS Fiddle example

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定位特定元素的选项，但是我发现这在工作示例中没有用。参见this link。

Answer 3

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

所以您可以这样写：

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

Answer 4

似乎您一次要执行两次行为。我在容器上使用了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 5

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

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;
            }
        }

}

Flexbox：如何通过空间来证明内容的合理性并将所有内容都集中在一起？

6 个答案: