Question

我目前正在尝试将Flexbox中最后一个元素的高度调整为高于flexbox底部元素的高度，但我无法做到这一点。我知道我可以使用align-content：stretch这是默认行为，但我不希望我的元素之间存在差距。

我只想要＆＃34;更多东西＆＃34;位于框的底部并与右边对齐，我无法通过阅读flexbox规范来了解如何操作。

HTML：

<div class="flex">
  <img/>
  <div>
    <p>
      Stuff
    </p>
  </div>
  <div class="bottom">
    <p>
      More Stuff
    </p>
  </div>
</div>

CSS：

.flex{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 500px;
  height: 600px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

img{
  width: 100%;
  height: 250px;
}

.flex div{
  width: 100%;
}

.bottom{
  align-self: flex-end;
  text-align: right;
}

Answer 1

首先，您需要在.flex元素上加上 flex-direction: column ，因为您正在尝试垂直对齐项目。从这里开始，只需将 flex-grow 和 flex-shrink 操纵到您想要的结果即可。

如果你希望.bottom元素 hard 在底部，你需要做的就是告诉另一个元素（我给了{{1使事情更清楚）它应该增长以占用所有可用空间。这可以使用.top完成。

这可以在以下内容中看到：

＆＃13;

flex-grow: 1

＆＃13;

.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column; /* New */
  align-content: flex-start;
  width: 500px;
  height: 600px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

img {
  width: 100%;
  height: 250px;
}

.flex div {
  width: 100%;
}

.top {
  flex-grow: 1; /* New */
}

.bottom {
  align-self: flex-end;
  text-align: right;
}

＆＃13;

Answer 2

更容易看出你是否在div上放置了不同的彩色背景，但由于flex-wrap: wrap，你的两个元素的宽度为100％，并且位于页面中心的另一个顶部。

因此，要首先对齐或对齐需要设置弯曲方向的元素。（将方向设置为列的任一行会更改被视为主轴的内容，您可以在MDN上看到图表）

行将主轴设置为左右，列将主轴设置为上下。

之后，您可以使用Justify-content: space-beween尽可能在沿主轴的方框div中分隔元素。（align-content控制设置为相反轴的任何内容）

    .flex{
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      align-content: flex-start;
      width: 500px;
      height: 600px;
      box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }

无法在flexbox

2 个答案: