Flex box align-content doesn't leave space between items

Question

I referred the material about flexbox align-content in these two places, stack overflow and css-tricks.

And i tried to place three horizontal bars of different colors with 100% height and equal amount of spacing between them.

For the flex container, i set align-content as space-between. But still, all stripes are closely packed with no space between.

How can i force the empty space below the stripes to be distributed in-between & around equally?

Plunker code is here.

<body style="height:100%;">
  <div style="display:flex;height:100%;background-color:#cccccc;flex-direction:column;align-content:space-between;">
    <div style="height:100px;background-color:#222222;width:100%;">
    </div>
    <div style="height:100px;background-color:#777777; width:100%;">
    </div>
    <div style="height:100px;background-color:pink; width:100%;">
    </div>
  </div>
</body>

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Sep 03 '16 at 13:47
@Paulie_D is correct. Especially with your high rep level, such a low-quality question is a bit surprising. I've edited because the fundamental question isn't bad and future visitors may benefit. — Michael Benjamin, Sep 03 '16 at 13:51

score 2 · Accepted Answer · edited Sep 03 '16 at 13:56

First you need to set height: 100% on html and next you should use justify-content: space-between;.

By default flex-direction is row and main axis is left-to right so justify-content position elements along main axis or horizontally. But when you change flex-direction to column now main axis is changed to top to bottom and justify-content position elements still along main-axis but now its vertically.

html {
  height: 100%;
}

<body style="height:100%;">
  <div style="display:flex;height:100%;background-color:#cccccc;flex-direction:column;justify-content:space-between;">
    <div style="height:100px;background-color:#222222;width:100%;">
    </div>
    <div style="height:100px;background-color:#777777; width:100%;">
    </div>
    <div style="height:100px;background-color:pink; width:100%;">
    </div>
  </div>

thanks Nenad.. i thought, justify-content centers horizontally always.. looks like, justify-content centers along main-axis... — , Sep 03 '16 at 13:53

Flex box align-content doesn't leave space between items

1 Answers1