Equal vertical spacing with a Flexbox column

Question

I am struggling in css to get my flexbox to display the items in a column equally spaced vertically, so even space between each row of the column.

html, body,
.flex-container {
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Droid Sans', sans-serif;
  overflow: hidden;
  background-color: #2b2b2b;
}

.flex-container {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2b2b2b;
}

img {
  border-radius: 50%;
  max-width: 400px;
  max-height: auto;
}

.home-flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

<div class="flex-container">
  <h1>Name</h1>
  <img src="image.png">
  <div class="home-flex">
    <a title="twitter" href="#">
      <i>twitter</i>
    </a>
    <a title="github" href="#">
      <i>github</i>
    </a>
    <a title="stackoverflow" href="#">
      <i>stackoverflow</i>
    </a>
    <a title="linkedin" href="#">
      <i>linkedin</i>
    </a>
    <a title="facebook" href="#">
      <i>facebook</i>
    </a>
  </div>
</div>

I can easily get horizontal spacing (see .home-flex) but I cant seem to get justify-content: space-around; or justify-content: space-between; to work vertically. Thanks

Answer 1

You just need to specify the flex length of each root element in the flex container to 1. This will evenly space them as they try to take up a proportional amount of space in the flex-direction.

html, body,
.flex-container {
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Droid Sans', sans-serif;
  overflow: hidden;
  
}

.flex-container {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-container h1 {
  flex: 1;
}

.flex-container img {
  border-radius: 50%;
  max-width: 400px;
  max-height: auto;
  flex: 1;
}

.home-flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  flex: 1;
}

<div class="flex-container">
  <h1>Name</h1>
  <img src="image.png">
  <div class="home-flex">
    <a title="twitter" href="#">
      <i>twitter</i>
    </a>
    <a title="github" href="#">
      <i>github</i>
    </a>
    <a title="stackoverflow" href="#">
      <i>stackoverflow</i>
    </a>
    <a title="linkedin" href="#">
      <i>linkedin</i>
    </a>
    <a title="facebook" href="#">
      <i>facebook</i>
    </a>
  </div>
</div>