具有 Flexbox 列的相等垂直间距

Question

我在 css 中努力让我的 flexbox 显示垂直等距的列中的项目，因此列的每一行之间的空间均匀。

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>

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

Answer 1

您只需要将 flex 容器中每个根元素的 flex 长度指定为 1。这将均匀地间隔它们，因为它们试图在 flex 方向上占据一定比例的空间。

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>