How to remove the space between children of an element using flex-wrap: does wrap apply?

Question

Question about .text-wrapperto which applies display:flex; flex-wrap:wrap. Reason for use flex-wrap:wrapis otherwise .text-wrapperand .tabs-wrapperdid not cease to be on the same line, side by side, for example, with the elements with each other inline(although I have no idea why, as divshould be blockthe level of elements, no? I would be grateful if someone can enlighten me on this)

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

But right now between .text-wrapperand a .tabs-wrapperlot of space. How to fix it?

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 -->

Run codeHide result

Answer 1

.text-wrapper, display: flex; flex-wrap: wrap.

, .text-container, CSS .text-wrapper.

flex-wrap: wrap , .text-wrapper .tabs-wrapper , , ( , , div , , - )

flex – , display: flex .text-container – Flex. , . , ( display flex).

, , .text-container 20 .

.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 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;
}

20px .text-wrapper .tabs-wrapper, .text-wrapper.

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

---

flexbox, :

• Flex
• CSS ~ MDN
• Flexbox ~ CSS-Tricks
• Flexbox?! ~ - YouTube.

Answer 2

flex-direction:column; flex-wrap.
flex , , CSS-