连续控制2个弹性项目之间的中间空间

时间：2019-02-14 21:53:18

标签： html css css3 flexbox

如何控制连续两个flex项目之间的中间空间？我的目标是最小化项目之间的中间空间。

换句话说，我想使列右对齐和居中对齐，同时保持文本居中。

我还希望能够控制中间水槽。另外，也许可以说中间的装订线应该是一些固定的像素数量，例如20px。

这不起作用，因为中间有太多空间

.row {
  display: flex;
  
}

.column {
  border: 1px solid #ccc;
  width: 50%;
}

h2 {
  text-align: center;
}
<div class="row">
  <div class="column first">
    <h2>Centered</h2>
    <h2>Text</h2>
  </div>
  <div class="column second">
    <h2>Centered</h2>
    <h2>Text</h2>
  </div>
</div>

此操作无效，因为文本未居中

.row {
  display: flex;
  
}

.column {
  border: 1px solid #ccc;
  width: 50%;
}

h2 {
  text-align: center;
}

.first h2 {
  text-align: right;
}

.second h2 {
  text-align: left;
}
<div class="row">
  <div class="column first">
    <h2>Centered</h2>
    <h2>Text</h2>
  </div>
  <div class="column second">
    <h2>Centered</h2>
    <h2>Text</h2>
  </div>
</div>

3 个答案:

答案 0 :(得分：2)

如果您希望元素相对于彼此或相对于整体具有特定比例（即：50%），则flexbox甚至不是最佳的解决方案（尽管可以勉强地实现它）需求）。

在孩子身上做一个简单的display: inline-block; width: 50%; box-sizing: border-box。

Flexbox旨在允许流体分配正负空间。

如图所示，在浏览器确定了孩子需要多少空间以及他们有多少可用空间之后，通过比较两种情况处理两种情况：

  • 正数空格：当父项>子项总和时，按照每个子项各自的flex-grow值（直到填充空格）成比例地将空间重新分配给每个子项。 flex-grow正值，在子级之间分配空间
  • 负空格：如果父级<孩子的总数，则按其flex-shrink的值按比例缩小每个孩子。

您有一个正数空间的情况，子级没有flex-grow，因此可以在两个子空间之间重新分配空间。您有三种选择：

  • justify-content: space-between
  • justify-content: space-around
  • justify-content: space-evenly

请注意在每种情况下如何均匀分布空间。这就是为什么它被称为flexbox的原因，这就是它的设计宗旨，并且，如果您愿意，那就是它的超能力。
当您设置width: 50%时，您可能会忽略所有这些内容：

.row {
  display: flex;
  width: 100%;
}

.row>* {
  border: 1px solid #ccc;
  text-align: center;
}

.one {
  justify-content: space-between;
}

.two {
  justify-content: space-around;
}

.three {
  justify-content: space-evenly;
}

.grow>* {
  flex-grow: 1;
  margin: 1rem;
}
<code>justify-content: space-between</code>
<div class="row one">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<code>justify-content: space-between  (unequal)</code>
<div class="row one">
  <div>
    <h2>A bigger element here</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>

<hr>
<code>justify-content: space-around;</code>
<div class="row two">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<code>justify-content: space-around; (unequal)</code>
<div class="row two">
  <div>
    <h2>A bigger element here</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<hr>
<code>justify-content: space-evenly;</code>
<div class="row three">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<code>justify-content: space-evenly; (unequal)</code>
<div class="row three">
  <div>
    <h2>A bigger element here</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<hr>
<code>> flex-grow: 1;</code>
<div class="row grow">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<hr>
<code>> flex-grow: 1; (unequal elements)</code>
<div class="row grow">
  <div>
    <h2>A bigger element here</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>

可以here找到关于flexbox工作原理的更详细说明。

官方规格为here。

考虑到您的问题，justify-content: space-evenly很有可能会做您想要的事情，但是我不确定，因为您的问题还不是很清楚。

重要说明：您可以始终在元素上使用margin和padding，这将相应地推动它们。还要注意margin: auto上的flexbox子代会从flexbox窃取正空间，并在父空间中存在的所有margin:auto之间平等地重新分配它们。看起来flexbox不能正常工作；实际上可以，但是没有任何要重新分配的东西。

如果您希望元素之间有特定的距离，并且整个构图应位于可用空间的中心，则可以将单个项目放在可用空间的中心，然后在该项目的内部放置这些项目，以便整个项目都以中心为中心，而不管项目是否不平等。

示例：

.row {
  display: flex;
  justify-content: center;
}
.row > *  {
  margin: 0 auto;
  display: flex;
}

.row>*>* {
  border: 1px solid #ccc;
  text-align: center;
  margin: 1rem;
}
<div class="row">
  <div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
  </div>
</div>
<hr>
<div class="row">
  <div>
    <div>
      <h2>Much more text here</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
  </div>
</div>
<hr>
<div class="row">
  <div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Centered</h2>
      <p>Text</p>
    </div>
    <div>
      <h2>Much more text here</h2>
      <p>Text</p>
    </div>
  </div>
</div>

但是，同样，您不需要flexbox。
使用简单的parent > child结构可以实现完全相同的效果，其中父级为display: block; text-align: center;，子级为display: inline-block; 

.row {
  text-align: center;
}

.row>* {
  border: 1px solid #ccc;
  text-align: center;
  margin: 1rem;
  display: inline-block;
}
<div class="row">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<hr>
<div class="row">
  <div>
    <h2>Much more text here</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
</div>
<hr>
<div class="row">
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Centered</h2>
    <p>Text</p>
  </div>
  <div>
    <h2>Much more text here</h2>
    <p>Text</p>
  </div>
</div>

请注意，标记中没有多余的包装器。

答案 1 :(得分：2)

为什么不简单地将CSS网格用于任务？它提供了grid-column-gap属性，它完全可以满足您的需求：

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
}

.column {
  border: 1px solid #ccc;
}

h2 {
  text-align: center;
}
<div class="row">
  <div class="column">
    <h2>Centered<br />Text</h2>
  </div>
  <div class="column">
    <h2>Centered<br />Text</h2>
  </div>
</div>

答案 2 :(得分：0)

尝试这样做

.column:not(:last-child){
margin-left: 20px;
}
相关问题
最新问题