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

Posted 2023-03-05

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

【英文标题】：How to justify content with space-between AND have everything centered?

【发布时间】：2014-04-08 00:46:42

【问题描述】：

我遇到了 flexbox 的问题。

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

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

如果我使用：

justify-content: center;

那么盒子不会填满最大宽度。

如果我使用：

justify-content: space-between;

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

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

【问题讨论】：

你试过justify-content: space-around吗？

@Adrift 这将具有与justify-content: space-around 相同的效果，但它不会具有 OP 正在寻找的效果（请参阅下面的评论）。

您可以使用媒体查询。 @media screen and (max-width 580px)

查看有问题的页面，您将很难使用 Flexbox 来适应移动浏览器，因为它们中的大多数不支持换行。你将不得不选择一种不同的方式来解决这个问题。

试试这个：***.com/questions/4771304/…

【参考方案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>

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

【讨论】：

结果和justify-content: space-around一样，物品没有到达两边。

搜索 4 小时后，通常是凌晨 2 点左右，一条非常小的 SO 评论提到了您在方形钉圆孔时所需的确切方法 - 谢谢

这实际上不适用于最后一行中的多个项目

如果您在响应式布局上使用此方法，您可能需要为弹性项目添加水平填充，以防止它们在换行前靠得太近。

【参考方案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。

【参考方案3】：

您似乎同时追求两种行为。我在容器上使用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;

【参考方案4】：

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