如何删除应用了 flex-wrap:wrap 的元素的 children 之间的 space？

Question

问题是关于 .text-wrapper，它应用了 display:flex; flex-wrap:wrap。使用 flex-wrap:wrap 的原因是 .text-wrapper 和 .tabs-wrapper 不会停止在一行上，彼此相邻，例如 inline 个元素（虽然我不知道为什么，因为 divs 应该是 block 级别元素，不是吗？如果有人也能在这方面启发我，我将不胜感激)

问题是我想要 .text-container 的 children 在底部，并且它们之间的距离不超过 20px space。

但是现在 .text-wrapper 和 .tabs-wrapper 之间有很多 space。我该如何解决这个问题？

JSFiddle here.

或

html,
body {
    height: 100%;
 box-sizing:border-box;
}

.the-page {
 height:100%;
 width:100%;
 position:relative;
}

.first-bottom {
    height: 100%;
}

.image-container img {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: block;
}

.text-container {
 height:100%;
 width:100%;
 top:0px;
 position:relative;
 display:flex;
 align-items:flex-end;
 flex-wrap:wrap;
}

.text-wrapper span {
 text-align:center;
 color:yellow;
}

.tabs-wrapper {
 height:50px;
 width:100%;
 background-color:pink;
 opacity:0.5;
}

.tabs-wrapper-inner {
 height:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 width:60%;
 margin:auto;
}

.tabs-wrapper-inner a {
 text-decoration:none;
 font:sans-serif;
 font-weight:bold;
 color:red;
 padding:10px;
}

.other-content {
    background-color: purple;
    opacity: 0.5;
    width: 100%;
    height: 500px;
}

<div class="the-page">

<div class="first-bottom">
    <div class="image-container">
        <img src="http://photostry.com/wp-content/uploads/2011/09/highway-arizona-to-utah.jpg" />
    </div>
 
 <div class="text-container">
  <div class="text-wrapper">
   <span>SUN BEACH WARM</span>
  </div>
  <div class="tabs-wrapper">
   <div class="tabs-wrapper-inner">
    <a href="#">AMY</a>
    <a href="#">BAMY</a>
    <a href="#">CAMY</a>
    <a href="#">DAMY</a>
    <a href="#">EAMY</a>
   </div>
  </div>
 </div>
</div>

<div class="other-content">.</div>

</div><!-- #the-page -->

Answer 1

您应该使用 flex-direction:column; 而不是 flex-wrap。
有关 flex 及其使用方法的更多信息，请访问 this excellent article at CSS Tricks

Answer 2

The question is about .text-wrapper, which has display: flex; flex-wrap: wrap applied to it.

我认为你的意思是.text-container，因为你的CSS中没有.text-wrapper规则。

The reason for using flex-wrap: wrap is that otherwise .text-wrapper and .tabs-wrapper wouldn't stop being on one line, next to each other, like inline elements (though I have no idea why, because divs should be block level elements, no? I'll appreciate if someone can enlighten me on this one as well)

当你创建一个弹性容器时——就像你在.text-container上声明display: flex一样——你建立了一个flex formatting context。在此上下文中，容器的子项成为 flex 项目 并遵守 flex 布局，而不是 块布局。默认情况下，弹性项目在单个非包装行中对齐（任何块或内联 display 值都被弹性规则覆盖）。

The problem is that I want the children of .text-container to its bottom, and not have more than 20px space between them.

But right now, there is a lot of space between .text-wrapper and .tabs-wrapper. How do I fix this?

要控制多条线在交叉轴上的对齐方式，可以使用align-content 属性.

两条线之间有宽 space 的原因是因为 align-content 的默认值是 stretch，它告诉 flex 线在他们之间平均交叉轴。

为了更好地理解属性的工作原理，我建议您为 .text-wrapper 和 .tabs-wrapper 添加边框（或背景，或两者）。然后尝试不同的 align-content 值：flex-start、flex-end、center、space-between、space-around 和 stretch。

此外，请记住一个重要提示，align-content 仅在 flex 容器的横轴上有多条线时才有效。如果只有一行就没有效果，应该用align-items代替。

将此添加到您的 CSS:

.text-container {
    height:100%;
    width:100%;
    top:0px;
    position:relative;
    display:flex;
    align-items:flex-end;
    align-content: flex-end; /* new */
    flex-wrap:wrap;
}

要在 .text-wrapper 和 .tabs-wrapper 之间创建 20px 的间距，只需在 .text-wrapper.

上添加一个底部边距即可

.text-wrapper {
    margin-bottom: 20px;
}

Revised Demo

要了解有关 flexbox 的更多信息，请访问：

如何删除应用了 flex-wrap:wrap 的元素的 children 之间的 space？

How to remove the space between the children of an element with flex-wrap:wrap applied?

css

flexbox