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

Question

The question is about .text-wrapper, which has display:flex; flex-wrap:wrap applied to it. 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)

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?

JSFiddle here.

OR

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.

I think you mean .text-container, because there is no .text-wrapper rule in your CSS.

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)

When you create a flex container – like you have by declaring display: flex on .text-container – you establish a flex formatting context. In this context, the children of the container become flex items and adhere to a flex layout, not a block layout. By default, flex items are aligned in a single, non-wrapping row (any block or inline display values are overridden by flex rules).

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?

To control the alignment of multiple lines in the cross axis, you can use the align-content property.

The reason there is wide space between both lines is because the default value of align-content is stretch, which tells flex lines to distribute free space in the cross axis equally among themselves.

To better understand how this property works I would suggest you add a border (or background, or both) to .text-wrapper and .tabs-wrapper. Then try out the different align-content values: flex-start, flex-end, center, space-between, space-around and stretch.

Also, an important note to keep in mind, align-content only works when there are multiple lines in the cross axis of the flex container. If there is only one line it will have no effect, and you should use align-items instead.

Add this to your 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;
}

To create a 20px gap between .text-wrapper and .tabs-wrapper simply add a bottom margin to .text-wrapper.

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

Revised Demo

---

To learn more about flexbox visit:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS-Tricks
• What the Flexbox?! ~ YouTube video tutorial