Why are these flex items spaced in this way?

Question

I have made a simple flexbox jsfiddle To play around with all flexbox values, but stumbled upon something that I can't explain my .item divs are spaced out for some reason and .grid is automatically stretching to full height, I'm not entirely sure why this happens?

HTML

<div class="container">
  <div class="grid">
    <div class="item red">a</div>
    <div class="item yellow">b</div>
    <div class="item blue">c</div>
  </div>
</div>

CSS

.container {
  width: 320px;
  height: 480px;
  background: black;
  padding:15px;
  margin: 20px auto;
  display: flex;
}

.grid {
  background: white;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  width: 100%;
  flex-grow: 0;
  flex-basis: 100%;
  align-self: auto;
  align-items: flex-start;
  padding: 10px 0;
}

.red { background: red; }
.yellow { background: yellow; }
.blue { background: blue; }

Read about `align-items` property. – Ricky Ruiz Mar 17 '17 at 16:04 — Ricky Ruiz, Mar 17 '17 at 16:04

score 1 · Accepted Answer · answered Mar 17 '17 at 16:06

The align-items: flex-start (set on .grid) causes this type of behavior. As specified in the MDN docs

The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container.

If you disable it, the value will be set to stretch by default (each flex item will be stretched to fill the container).

Why are these flex items spaced in this way?

1 Answers1