Question

我在一个容器中有一列包裹着两个弹性项目，两个盒子之间有很大的空间，我尝试使用 align-items: flex-start; 或 align-self: flex-start; 但不起作用。< /p>

请看代码片段。

谢谢。

.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

您可以简单地使用 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>

Answer 2

您需要将 flex-direction: column; 添加到 .sidebar

.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

无需将 flexbox 的 .sidebar 包装起来，只需简单地将其注释掉即可。并添加 flex-direction: column;

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

弹性项目之间的垂直空间

3 个答案: