Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove gap between rows of flex items [duplicate]

Tags:

html

css

flexbox

Here's my example code:

#parent {
  display: flex;
  height: 350px;
  background: yellow;
}
#wrapper {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  margin: 0 10%;
  background: #999;
}

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

As you can see, there's a gap (big gray area) between top (red) and left/right (blue/green). Flexbox seems to be spreading everything equally in parent element (gray).

However, I don't want the gap between my elements, I need everything to "rise" to top. There can be a gap after all elements (at the end).

I tried everything I could find/think of: auto margins, justify-content, align-items etc. No desired effect.

How to achieve this?

like image 272
Solo Avatar asked Jun 19 '17 14:06

Solo


People also ask

How do I remove the gap between table and cells?

There are three main ways to remove gaps between table and cells: Using the border-collapse and border-spacing properties in CSS Adding CSS reset to your code Using the cellspacing table attribute (deprecated).

What is CSS gap in Flexbox?

CSS Gap is a feature of the CSS Grid spec and Flexbox; however, currently Firefox is the only major browser that supports gap on flex items. Because of the lack of browser support, to achieve the same effect we will need to use some CSS hacks with margins.

How do I fix the Flex gap in Flexbox?

To support older browsers that don't support Flex Gap in Flexbox we can use a margin hack to create a close workaround. We can set margin space on the top and left of each item. On the flex parent element, we use negative margins to counter the excess margin on the outer child elements.

How to fix table gaps in HTML using CSS?

In our CSS, we can set the border-spacing property to 0: Our table gaps are gone! In order to create consistent alignment of your borders, margins, and padding, we can utilize a CSS reset. This will solve the gaps in our HTML table rows and cells, however, this is an excessive approach if your CSS styles are already established.


2 Answers

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>
like image 65
Nenad Vracar Avatar answered Oct 14 '22 09:10

Nenad Vracar


In a multi-line flex row layout, the align-content controls how the flex items aligns vertical when they wrap, and since its default is stretch, this is expected behavior.

Change it to align-content: center; and you'll see how their alignment change to vertical middle.

#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: center;
}

#top {
  flex: 1 100%;
  height: 50px;
  background: red;
}

#left {
  width: 30%;
  height: 150px;
  background: blue;
}
#right {
  flex: 1;
  background: green;
}
<div id="parent">
  <div id="wrapper">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
</div>
like image 36
Asons Avatar answered Oct 14 '22 09:10

Asons