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

@JacobGray Thank you. Removing `flex-wrap`, adding `flex-direction:column;`, adding `justify-content:flex-end`, and changing `align-items` to `align-items:center;` did it. Please write that as an answer so that I can accept it, that will be useful for future visitors. — Solace, Dec 22 '15 at 23:31

score 4 · Accepted Answer · edited May 23 '17 at 12:19

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

score 2 · Answer 2 · answered Dec 22 '15 at 23:38

2

You should use flex-direction:column; instead of flex-wrap.
For more information on flex and how to use it, there is this excellent article at CSS Tricks

answered Dec 22 '15 at 23:38

Jacob G

13,762
3
47
67

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

2 Answers2