css - 如何使用 flex-wrap :wrap applied? 删除元素的子元素之间的空格

Question

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

问题是我希望 .text-container 的子元素位于其底部，并且它们之间的间距不超过 20px。

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

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

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)

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

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属性(property)。

两条线之间有宽间距的原因是因为 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 的更多信息，请访问:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS 技巧
• What the Flexbox?! ~ YouTube 视频教程