问题是关于.text-wrapper，它已display:flex; flex-wrap:wrap应用于它。之所以使用flex-wrap:wrap是，否则.text-wrapper并.tabs-wrapper不会停止是在同一行，彼此相邻，就像inline元素（虽然我不知道为什么，因为divS的关系是block层次的元素，不是吗？我会很感激，如果有人能赐教在这个也是）
问题是我希望孩子们.text-container到它的底部，并且他们之间的空间不超过 20px。
但是现在，.text-wrapper和之间有很多空间.tabs-wrapper。我该如何解决？
或者
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 -->问题是关于
.text-wrapper，它display: flex; flex-wrap: wrap适用于它。
我认为你的意思是，因为你的 CSS 中.text-container没有规则。.text-wrapper
使用的原因
flex-wrap: wrap是，否则.text-wrapper不会.tabs-wrapper停止在一行上，彼此相邻，就像内联元素一样（尽管我不知道为什么，因为 div 应该是块级元素，不是吗？如果有人可以，我将不胜感激也请赐教我这一点）
当您创建一个 Flex 容器时（就像您通过声明display: flexon所做的那样.text-container），您建立了一个Flex 格式化上下文。在这种情况下，容器的子项成为弹性项目并遵循弹性布局，而不是块布局。默认情况下，Flex 项目在单个非换行行中对齐（任何块或内联display值都会被 Flex 规则覆盖）。
问题是我希望子元素
.text-container位于其底部，并且它们之间的空间不超过 20px。但现在，
.text-wrapper和之间有很大的空间.tabs-wrapper。我该如何解决？
要控制交叉轴上多条线的对齐方式，可以使用该align-content属性。
两条线之间存在较宽空间的原因是因为默认值是align-content，stretch它告诉柔性线在它们之间均匀地分配交叉轴上的可用空间。
.text-wrapper为了更好地理解此属性的工作原理，我建议您向和添加边框（或背景，或两者）.tabs-wrapper。然后尝试不同的值align-content：flex-start、flex-end、center、space-between和space-around。stretch
另外，需要记住的一个重要注意事项是，align-content仅当弹性容器的横轴上有多条线时才有效。如果只有一行，则没有任何效果，您应该使用它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要在和之间创建 20px 间隙，.tabs-wrapper只需添加底部边距即可.text-wrapper。
.text-wrapper {
margin-bottom: 20px;
}
要了解有关 Flexbox 的更多信息，请访问：