CODEWITHSUNDEEP
htmlcssflexbox
j.grima
j.grima

Reputation: 1941

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

I am trying to have a number of items underneath each other in a container with a set height. Items will then carry on next to each other if there's no space left.

This is the idea:

I am trying to achieve this using flexbox, a container with a set height, direction is set to column and flex-wrap is wrap:

The issue is that there are wide gaps between the columns.

enter image description here

I tried setting both justify-content and align-items to flex-start, but that is probably the default value.

Is there any way to solve this?

Here is the code:

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
}
.items {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: tomato;
  color: white;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}
<div class="container">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
</div>

codepen

Upvotes: 86

Views: 151960

Answers (2)

user12170141
user12170141

Reputation: 31

to whomever this might be useful. i just had an issue when grid (either inline-grid or inline-block) created issue with contents (buttons) that had different text lengths within them. the result was uneven gaps between the individual grid items. the solution came after switching to flex and modifying container and individual items as following:

.grid-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}
.grid-item {
  height: 80px;
  width: 120px;
  margin: 0px;
}

Upvotes: 3

Michael Benjamin
Michael Benjamin

Reputation: 371221

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.

Upvotes: 181

Related Questions