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

Question

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

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

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

在此处查看图片：

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>

Answer 1

我知道了。 将'.my-flex-row'设置为'with：100％;'和“ flex-basis：auto;”，它给了我一行，其中只包含3个所需的项目。 将“ .my-flex-item-content”设置为“ align-content：flex-end;”没有间距。

Rows without any spacing between is working nicely

Answer 2

您应该从.my-flex-item-content删除flex-grow属性，然后添加margin-top:auto;。 http://jsfiddle.net/zv56fak7/13/

.my-flex-item-content {
  margin-top:auto;
  align-items: baseline;
  align-items: flex-end;
  background-color: rebeccapurple;
  display: flex;
  flex-wrap: wrap;
}

如果这是一个问题，还请注意填充和框大小

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