时间戳

首页 > 解决方案 > 无法对齐弹性框中的元素

html - 无法对齐弹性框中的元素

问题描述

我目前正在尝试将 flexbox 中的最后一个元素对齐，使其高度高于 flexbox 底部的元素，但我无法做到。我知道我可以使用 align-content: stretch 这是默认行为，但我不希望我的元素之间有间隙。

我只希望“更多东西”位于框的底部并向右对齐，我无法通过阅读 flexbox 规范来弄清楚如何做到这一点。

https://jsfiddle.net/k8dec2bx

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;
}

标签： htmlcssflexbox

解决方案

如果您在 div 上放置不同颜色的背景更容易查看，但是您的两个元素是 100% 宽度并且在页面中心彼此重叠，因为flex-wrap: wrap.

因此，要对齐或证明您需要首先设置 flex 方向的元素。（将方向设置为任一列的行会改变被认为是主轴的方向，您可以在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);
    }

推荐阅读