css - 弯曲两行以在底部对齐而不根据空间居中

问题描述

我需要使两行与底部对齐，而不使用其余空间垂直对齐第一行。

当我只有一行时效果很好，但是当我添加另一行时，第一行将垂直对齐以使其使用其余空间。

基本上我希望这两行位于底部，因为那样它们将与其他容器中的行对齐，并使其看起来一致。标题的长度可能不同，因此内容内的框必须始终流到底部，以便它们始终对齐。

看这里的图片：

Flex align bottom 需要在橙色行之间没有空间

jsFiddle 示例：http: //jsfiddle.net/zv56fak7/2/

这里它在一行中显示两行，它们应该在单独的行上，并且都与底部对齐，它们之间没有任何间距。我试图在单独的行中制作“my-flex-item-content-box”，但它没有用。所以我想要它如图所示，但只是所有的橙子行都应该与底部对齐。

示例代码：

.my-flex-container {
  display: flex;
  flex-wrap: wrap;
}

.my-flex-item-wrapper {
  width: 33%;
  padding: 5px;
  display: flex;
}

.my-flex-item {
  border: 1px solid gray;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.my-flex-item-header {
  font-size: 2.5em;
  background-color: #f5f5f5;
  border-bottom: 1px solid gray;
}

.my-flex-item-content {
  align-items: baseline;
  align-items: flex-end;
  background-color: rebeccapurple;
  display: flex;
  flex-wrap: wrap;
  flex-grow: inherit;
}

.my-flex-row {
  display: flex;
  flex: 1;
}

.my-flex-item-content-box {
  width: 33.33%;
  min-height: 100px;
  color: white;
  background-color: purple;
  background-color: orange;
}

<div class="my-flex-item-wrapper">
  <div class="my-flex-item">
    <div class="my-flex-item-header">
      Queen and Adam Lambert 4th July Ultimate On Stage Experience
    </div>
    <div class="my-flex-item-content">
      <div class="my-flex-row">
        <div class="my-flex-item-content-box">
          Content box
        </div>
        <div class="my-flex-item-content-box">
          Content box
        </div>
        <div class="my-flex-item-content-box">
          Content box
        </div>
      </div>
      <div class="my-flex-row">
        <div class="my-flex-item-content-box">
          Content box
        </div>
        <div class="my-flex-item-content-box">
          Content box
        </div>
        <div class="my-flex-item-content-box">
          Content box
        </div>
      </div>
    </div>
  </div>
</div>

标签： cssflexbox

css - 弯曲两行以在底部对齐而不根据空间居中

问题描述

解决方案

推荐阅读