CODEWITHSUNDEEP
javascripthtmlcssflexbox
Or Betzalel
Or Betzalel

Reputation: 2597

Disable flex wrap spacing

I have a list of items I want to display and I'm using flex-wrap.

But my problem is that the columns (after the first) are getting aligned in the center of the remaining space, rather then sticking to the first column.

.items {
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 500px;
}

.items .item {
  font-size: 5rem;
  border: 1px solid grey;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem;
  width: 20rem;
  text-align: center;
}
<div class="items">
  <div class="item">
    #1
  </div>
  <div class="item">
    #2
  </div>
  <div class="item">
    #3
  </div>
  <div class="item">
    #4
  </div>
  <div class="item">
    #5
  </div>
</div>

https://codepen.io/anon/pen/oyjmaV

Any ideas to solve the problem?

Upvotes: 1

Views: 424

Answers (1)

Nikki Mather
Nikki Mather

Reputation: 1148

The reason this is happening is because the initial setting of a flex container is set to align-content: stretch, which then fills up the entirety of the remaining space.

You can add align-content: flex-start to override this default behaviour.

Updated Codepen: https://codepen.io/anon/pen/wXKOQy

Upvotes: 3

Related Questions