使用Flexbox列的垂直间距相等

Question

我在css中苦苦挣扎，让我的flexbox在垂直等间距显示列中的项目，所以即使列的每一行之间都有空格。

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我可以轻松获得水平间距（请参阅.home-flex）但我似乎无法使justify-content: space-around;或justify-content: space-between;垂直工作。感谢

Answer 1

您只需要将flex容器中每个根元素的弹性长度指定为1.这将在它们尝试在弹性方向占据一定比例的空间时均匀分隔它们。

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>