Madhavan Kumar Madhavan Kumar - 2 months ago 12
CSS Question

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

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>




Answer

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>

Comments