弹性项目之间的垂直空间[重复]答案

【问题标题】：Verical space between flex items [duplicate]弹性项目之间的垂直空间[重复]
【发布时间】：2021-09-30 09:45:04
【问题描述】：

我在一个容器中有两个 flex 项，它们被包裹在一个列中，两个盒子之间有很大的空间，我尝试使用 align-items: flex-start; 或 align-self: flex-start; 但不起作用。

请看代码sn-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>

【问题讨论】：

您为每个弹性项目指定了 50 像素的高度。你对我朋友的行为有何期待。我猜要成为他们中的一个吗？如果我正确理解了您的问题
对齐内容不对齐项目

标签： css flexbox

【解决方案1】：

无需包装您的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>

【讨论】：

【解决方案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>

【讨论】：

相信我已经回答过了。呵呵！！！无论如何，干杯！！！
@ImranRafiqRather 是的。发布我的后，我看到了你的答案。干杯！

【解决方案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>

【讨论】：