Vertically justify content

Question

Hopefully this isn't an unsolved task, but I'm trying to vertically justify an unknown (ish) number of divs inside of a container.

Each div should be equal distances from each other, and, additionally, the same distance from the edges. (Assuming the last part can be accomplished using ghost elements before and after)

The divs will each fill the width of the container, and the container is a set height, but the number of elements inside the container is unknown.

I'm assuming it can be done using Flexbox to some degree, but have been unsuccessful in my attempts thus far.

@Lowkase, I'd tried a variety of different solutions, but the main problem was that I didn't know how to start. — Rockster160, Jun 18 '16 at 00:57
There are several possibilities: `justify-content: space-around` / `space-between`, `auto` margins, and even `pseudo-elements` on the flex container. All covered here: http://stackoverflow.com/a/33856609/3597276 — Michael Benjamin, Jun 18 '16 at 01:31

score 23 · Answer 1 · answered Jun 18 '16 at 01:07

Yep, flexbox is the simplest way to do it.

On the container element:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

On the child elements:

.container div {
  flex: 1;
  width: 100%
}

For the spacing between the elements, just add padding to the container and bottom margins to the children.

The style would look like this:

.container {
  /* Same as above, and */
  padding: 20px;
}

.container div {
  /* Same as above, and */
  margin-bottom: 20px;
}

.container div:last-of-type{
  margin-bottom: 0;
  /* So that spacing is even at bottom and top of container */
}

(I was typing this when you posted your answer, so I put it up anyway)

Fiddle

"flex-direction: column" is the trick I was looking for :) – NMC Feb 15 '23 at 16:15 — NMC, Feb 15 '23 at 16:15

score 1 · Answer 2 · answered Jan 08 '21 at 10:46

I use justify-content:space-evenly.

HTML:

div.container {
  display: flex;
}

div.one_item_container {

  display: flex;
  flex-direction: column;            
  justify-content: space-evenly;
  
}

<div class="container">
  <div class="one_item_container">
    <img height="30" src="hello.jpeg" style="background-color:lightblue;" />
  </div>
  <div class="one_item_container">
    <img height="50" src="hello2.jpeg" style="background-color:lightblue;" />
  </div>
  <div class="one_item_container">
    <img height="40" src="hello2.jpeg" style="background-color:lightblue;" />
  </div>
</div>

score -1 · Accepted Answer · answered Jun 18 '16 at 01:01

As usual, no matter how long I search, I find the answer only immediately after I ask the question. :D

For those curious, or for my own future reference: Flexbox's justify DOES work, you just need a few more options:

HTML:

<div id="outer-container">
  <div class="inner-element"></div>
  <div class="inner-element"></div>
  <div class="inner-element"></div>
  <div class="inner-element"></div>
  <div class="inner-element"></div>
  <div class="inner-element"></div>
  <div class="inner-element"></div>
</div>

CSS:

#outer-container {
  height: 250px;
  width: 200px;
  background: red;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.inner-element {
  width: 200px;
  height: 10px;
  background: blue;
}

https://css-tricks.com/almanac/properties/j/justify-content/

https://jsfiddle.net/WW3bh/

Vertically justify content

3 Answers3