对齐flexbox的底部

Question

我有应该根据内容动态更改高度的容器。对于给定行中的所有容器，无论每个容器的内容如何，​​底部文本都应固定在底部。

.flex-list {

  display: flex;

  flex-direction: column;

}

.flex-list .flex-row {

  display: flex;

  margin-bottom: 20px;

}

.flex-list .flex-row .flex-item-wrapper {

  margin-right: 20px;

  width: 100%;

  background-color: yellow;

}

.flex-list .flex-row .flex-item-wrapper:last-child {

  margin-right: 0px;

  background-color: transparent;

}

.flex-list .flex-row .flex-item-wrapper .flex-item {

  width: 100%;

  height: 100%;

}

.flex-item-stats {

  display: flex;

  justify-content: space-between;

  color: grey;

  padding-top: 10px;

}

.flex-item-stats > * {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.caption {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}


<div class="profile-content flex-list">

  <div class="flex-row">

    <div class="flex-item-wrapper">

      <div class="flex-item thumbnail clickable" data-href="#">

        <img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px">

        <div class="caption">

          <h4>

                <a href="#">Y-find</a>

              </h4>

          <div class="flex-item-stats">

            <small>left</small>

            <small>right</small>

          </div>

        </div>

      </div>

    </div>

    <div class="flex-item-wrapper">

      <div class="flex-item thumbnail clickable" data-href="#">

        <img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px">

        <div class="caption">

          <h4>

                <a href="#">Cardguard Namfix</a>

              </h4>

          <div class="flex-item-stats">

            <small>left</small>

            <small>right</small>

          </div>

        </div>

      </div>

    </div>

    <div class="flex-item-wrapper">

      <div class="flex-item thumbnail clickable" data-href="#">

        <img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px">

        <div class="caption">

          <h4>

                <a href="#">Voyatouch Voyatouch Voyatouch Voyatouch Voyatouch Voyatouch </a>

              </h4>

          <div class="flex-item-stats">

            <small>left</small>

            <small>right</small>

          </div>

        </div>

      </div>

    </div>

    <div class="flex-item-wrapper">

    </div>

  </div>



</div>

我认为display:flex与.caption一起使用space-between可以将其推flex-item- stats到最低点，但似乎没有任何作用。

Answer 1

您需要使父级成为flex容器：

.flex-list .flex-row .flex-item-wrapper .flex-item {
    width: 100%;
    height: 100%;
    display: flex;                      /* new */
    flex-direction: column;             /* new */
}

然后，告诉.caption元素填充可用高度：

.caption { flex: 1; }