Flexbox列的垂直间距相等 [英] Equal vertical spacing with a Flexbox column

问题描述

我正在努力让CSS的Flexbox在垂直排列的列中显示项目，以使列的每一行之间保持均匀的间距。

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>

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

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

推荐答案

您只需要将flex容器中每个根元素的flex长度指定为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>

这篇关于Flexbox列的垂直间距相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！