flex项之间的垂直空间[重复]

Question

我有两个flex项目在一个包装在一列中的容器中，两个盒子之间有一个很大的空间，我尝试使用align items:flex start 或自对齐：柔性启动 但不起作用。

请看代码片段。

谢谢你。

.wrapper {
  display: flex;
  }
.content {
  width: 300px;
  height: 400px;
  background: green;
  }
.sidebar {
    display: flex;
    /* flex-basis: 100px; */
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 100px;
}
.sidebar > div {
    background: blue;
    width: 100px;
    height: 50px;
    align-self: flex-start;
}

<div class = "wrapper">

  <div class="sidebar">

    <div></div>
    <div></div>

  </div>

  <div class = "content">

  </div>

</div>




Answer 1

不需要包装你的flexbox的。侧边栏只是简单地注释它。并添加flex-way：列；

.wrapper {
  display: flex;
  }
.content {
  width: 300px;
  height: 400px;
  background: green;
  }
.sidebar {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    /* flex-basis: 100px; */
    /* flex-wrap: wrap; */
    align-items: flex-start;
    max-width: 100px;
}
.sidebar > div {
    background: blue;
    width: 100px;
    height: 50px;
    align-self: flex-start;
}

<div class = "wrapper">

      <div class="sidebar">

        <div></div>
        <div></div>

      </div>

      <div class = "content">

      </div>

    </div>

Answer 2

您需要添加flex-direction:column 到。侧栏

.sidebar {
    display: flex;
    /* flex-basis: 280px; */
    flex-wrap: wrap;
    align-items: flex-start;
    height: 400px;
    max-width: 280px;
    flex-direction: column;
}
.sidebar > div {
    background: blue;
    width: 280px;
    height: 50px;
    margin-top: 1px; /* Demo purposes */
}

<div class="sidebar">

<div></div>
<div></div>

</div>

Answer 3

您可以简单地使用flex-direction:column 使它们一个比另一个低。

如果这是您正在寻找的：）同样为了您的信息，flex-basis是flex-items的属性，而不是flex-container的属性。

.sidebar {
    display: flex;
       height: 400px;
       flex-direction:column;
       max-width: 280px;
}
.sidebar > div {
    background: blue;
    width: 280px;
    height: 50px;
    margin-bottom:0.5rem;
}

<div class="sidebar">

    <div></div>
    <div></div>

</div>