Remove Space (Gaps) Between Multiple Lines of Flex Items When They Wrap

Remove space (gaps) between multiple lines of flex items when they wrap

An initial setting of a flex container is align-content: stretch.

This means that multiple lines of flex items will be distributed evenly along the cross axis.

To override this behavior, apply align-content: flex-start to the container.

When you're working in a single-line flex container (i.e., flex-wrap: nowrap), the properties to use to distribute space along the cross axis are align-items and align-self.

When you're working in a multi-line flex container (i.e., flex-wrap: wrap) – like in the question – the property to use to distribute flex lines (rows / columns) along the cross axis is align-content.

From the spec:

8.3. Cross-axis Alignment: the align-items and align-self properties

align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items.

8.4. Packing Flex Lines: the align-content
property

The align-content property aligns a flex container’s lines within the
flex container when there is extra space in the cross-axis, similar to
how justify-content aligns individual items within the main-axis.
Note, this property has no effect on a single-line flex container.

The align-content property takes six values:

flex-start
flex-end
center
space-between
space-around
stretch

Here's the definition for stretch:

stretch

Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

In other words, align-content: stretch on the cross axis is similar to flex: 1 on the main axis.

Remove gap between rows of flex items

You need to add align-content: flex-start on flex-container or in your case #wrapper element.

#parent {  display: flex;  height: 350px;  background: yellow;}#wrapper {  flex: 1;  display: flex;  flex-flow: row wrap;  margin: 0 10% 50px 10%;  background: #999;  align-content: flex-start; /* Add this*/}#top {  flex: 1 100%;  height: 50px;  margin-top: 10px;  background: red;}#left {  width: 30%;  height: 150px;  margin: 10px 10px 0 0;  background: blue;}#right {  flex: 1;  margin: 10px 0 0 0;  background: green;}

<div id="parent">  <div id="wrapper">    <div id="top"></div>    <div id="left"></div>    <div id="right"></div>  </div></div>

Removing margin from flex items when they wrap

Update in late 2021

Now the gap property also works with Flexbox (on newer browser versions).

* {
  margin: 0;
  padding: 0;
}

html, body {
  box-sizing: border-box;
}

.container {
  width: 600px;
  margin: 0 auto;
  margin-top: 25px;
  border: 1px solid;
  padding: 5px;
}

.tags {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;                          /* added */
}

.tag {
  padding: 5px;
  background-color: #76FF03;
  /* margin: 0 5px 5px;                 removed */
}

<div class="container">
  <ul class="tags">
    <li class="tag item-1">Tag Item 1</li>
    <li class="tag item-2">Tag Item 2</li>
    <li class="tag item-3">Tag Item 3</li>
    <li class="tag item-4">Tag Item 4</li>
    <li class="tag item-5">Tag Item 5</li>
    <li class="tag item-6">Tag Item 6</li>
    <li class="tag item-7">Tag Item 7</li>
    <li class="tag item-8">Tag Item 8</li>
    <li class="tag item-9">Tag Item 9</li>
    <li class="tag item-10">Tag Item 10</li>
    <li class="tag item-11">Tag Item 11</li>
    <li class="tag item-12">Tag Item 12</li>
    <li class="tag item-13">Tag Item 13</li>
    <li class="tag item-14">Tag Item 14</li>
    <li class="tag item-15">Tag Item 15</li>
    <li class="tag item-16">Tag Item 16</li>
  </ul>
</div>

Better way to set distance between flexbox items

Flexbox doesn't have collapsing margins.
Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

remove extra space on the right after the wrapping of items with flex-wrap, while maintaining equal spacing between items

Using grid instead of flexbox would make it easier, like this:

const App = () => {

  return (
    <div>
      <p>see the items below, regardless of how many I have, I need to hide whatever doesn't fit on the line screen.</p>
      <p>All items need to have 8px gap in between them, including the green one which does not wrap.</p>
      <h5>How can this be done?</h5>
      <div className="container">
        <div className="wrap-container">
          {Array.from({ length: 100 }).map((_, index) => <div className="item" key={index}>{index}</div>)}
        </div>
        <div className="non-wrap-item"> I need to be 8px from the last visible item</div>
      </div>
    </div>
  )
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: grid;
  grid-template-columns:1fr 80px;
  gap: 8px;
  /* if you want some max-width, put it here instead*/
  max-width: 500px;
}

.wrap-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px,1fr));
  gap: 8px;
}

.item {
  height: 80px;
  background-color: blue;
  color: white;
}

.non-wrap-item {
  height: 80px;
  background-color: green;
  color: white;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Remove gap between columns in flex layout

Your flex container (.parent-container) has three children (flex items).

Each child has a class child33.

The flex container is set to flex-direction: column and flex-wrap: wrap, meaning the items will align vertically and wrap when necessary, forming new columns.

.parent-container {
    display: -ms-flexbox;
    display: flex;
    font-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 92vh;
    width: 100vw;
}

<div class="parent-container" style="flex-direction: column; align-items: center; ...">

So in your image you have a two-column layout: two items in the first column, and the third item wraps to form the second.

The reason both columns are spread out is that an initial setting of a flex container is align-content: stretch. This means that multiple lines in the cross axis will be distributed evenly across the length of the container.

You already have align-items: center in your code. But this only works on single line flex containers. When there are multiple lines in the cross-axis, you need to use align-content.

So, override the default setting by adding align-content: center to your container.

body { margin: 0; }
.parent-container {    display: flex;    flex-direction: column;    align-items: center;    flex-wrap: wrap;    height: 92vh;    width: 100vw;    align-content: center;  /* NEW */}
.aelia-text {    display: flex;    justify-content: center;    align-items: center;    background: white;    color: black;    font-size: 1.5vw;    font-family: portland-medium-font;}
.child33 {    flex-grow: 1;    height: 50%;    width: 33.3%;    max-width: calc(100% * (1/3));    margin: 0;    position: relative;}
.img-wrapper {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    /* added image for demo; original code had relative URI */    background-image: url(http://i.imgur.com/60PVLis.png);    background-size: contain;    background-repeat: no-repeat;    background-position: center;}

<div style="background: grey;">    <div class="parent-container">        <div class="aelia-text child33">            The first of it's kind, to            <br/> create a better customer            <br/> journey with reduced            <br/> collection waiting time and            <br/> a special moment that makes            <br/> even the most jet-lagged            <br/> shopper smile.        </div>        <div class="child33">            <div class="img-wrapper"></div>        </div>        <div class="child33">            <div class="img-wrapper"></div>        </div>    </div></div>

Flex items create space between them when they wrap

When you create a flex container, an initial setting is align-content: stretch.

This causes multiple lines of flex items to distribute themselves evenly along the cross axis of the container. It's kind of like setting flex: 1 along the main axis: the flex items spread evenly across the line.

As a result, align-content: stretch may cause gaps when flex items wrap.

The simple solution is to override this setting with align-content: flex-start.

revised fiddle

html,body {  width: 100%;  height: 100%;}#container {  display: flex;  height: 100%;  background-color: blue;}.block {  flex: 1;}#left {  background-color: green;}#center {  display: flex;  flex: 1;  flex-wrap: wrap;  align-content: flex-start; /* NEW */}#right {  background-color: orange;}.flexContainer {  flex: 1;  width: 50%;  min-width: 100px;  max-width: 50%;  height: 150px;  background-color: red;  padding: 10px;}.flexDiv {  width: 100%;  height: 100%;  background-color: yellow;}

<div id="container">  <div id="left" class="block">Left</div>  <div id="center" class="block">    <div class="flexContainer">      <div class="flexDiv"></div>    </div>    <div class="flexContainer">      <div class="flexDiv"></div>    </div>  </div>  <div id="right" class="block">Right</div></div>

Remove whitespace between rows on wrapped Flexbox

Maybe I'm wrong, but I don't think that you can achieve this with flex. You can try with float: left; on children but you still end up with that space below the content in some places.

You can look up for the Masonry layout solution in JS.

Or you can use column-count: 3; it will remove those white spaces, but it will work like this:

A D G

B E H

C F J

(from the top to the bottom like in a newspaper)

I've added those two rules in the ul to block the division of those blocks between columns.

  display: inline-block;
  width: 100%;

.wrapper {  column-count: 3;}
.wrapper ul {  display: inline-block;  width: 100%;  list-style: none;  padding: 0;  margin: 0 0 1em;}

<div class="wrapper">  <ul>    <li>List 1 - child</li>    <li>List 1 - child</li>    <li>List 1 - child</li>    <li>List 1 - child</li>    <li>List 1 - child</li>    <li>List 1 - child</li>  </ul>  <ul>    <li>List 2 - child</li>    <li>List 2 - child</li>    <li>List 2 - child</li>  </ul>  <ul>    <li>List 3 - child</li>    <li>List 3 - child</li>    <li>List 3 - child</li>    <li>List 3 - child</li>    <li>List 3 - child</li>  </ul>  <ul>    <li>List 4 - child</li>    <li>List 4 - child</li>    <li>List 4 - child</li>    <li>List 4 - child</li>    <li>List 4 - child</li>  </ul>  <ul>    <li>List 5 - child</li>    <li>List 5 - child</li>    <li>List 5 - child</li>  </ul>  <ul>    <li>List 6 - child</li>    <li>List 6 - child</li>  </ul>  <ul>    <li>List 7 - child</li>    <li>List 7 - child</li>    <li>List 7 - child</li>    <li>List 7 - child</li>    <li>List 7 - child</li>  </ul>  <ul>    <li>List 8 - child</li>    <li>List 8 - child</li>    <li>List 8 - child</li>    <li>List 8 - child</li>  </ul>  <ul>    <li>List 9 - child</li>    <li>List 9 - child</li>    <li>List 9 - child</li>    <li>List 9 - child</li>    <li>List 9 - child</li>    <li>List 9 - child</li>    <li>List 9 - child</li>    <li>List 9 - child</li>  </ul>  <ul>    <li>List 10 - child</li>    <li>List 10 - child</li>  </ul></div>

Remove Space (Gaps) Between Multiple Lines of Flex Items When They Wrap