html - Css flex-box - 如何将单个元素对齐到底部，同时将其他元素保持在顶部

Question

我使用 flex-box 有一段时间了，但现在遇到了一个问题。我做了几个盒子，每个盒子里有 3 个元素，一个图像一个段落和一个按钮。图片和段落需要保持在顶部，而按钮需要在行的底部对齐。感谢您的宝贵时间:)

HTML:

<div class="parent">
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>e egestas, dui nibh gravida urna</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Suspendisse eta</p>
    <input type="button" value="bring me down!">
  </div>

  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>orem ipsum dolor sit amet</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>e egestas, dui nibh gravida urna</p>
    <input type="button" value="bring me down!">
  </div>

  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>orem ipsum dolor sit amet</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p> est id, vestibulum vestibulum metu</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>

</div>

CSS:

.parent {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.parent .child {
  border: 1px solid black;
  flex: 1 1 32%;
}
.parent .child img {
  max-width: 100%;
}
.parent .child input {
  width: 100%;
  align-self: flex-end; /*alignment not working*/
}

http://jsfiddle.net/ou6wLg1m/ .

Answer 1

child 基本上是一个列，所以你可以使用 flexbox 和 flex-direction 列。

.parent {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.parent .child {
  border: 1px solid black;
  flex: 1 1 32%;
    display: flex;
    flex-direction: column;
    align-items:flex-start;

}

.parent .child input {
  width: 100%;
  margin-top: auto;
  align-self: flex-end; 
}

.parent {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.parent .child {
  border: 1px solid black;
  flex: 1 1 32%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.parent .child img {} .parent .child input {
  width: 100%;
  margin-top: auto;
  align-self: flex-end;
}

<div class="parent">

  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>

  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>e egestas, dui nibh gravida urna</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Suspendisse eta</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>orem ipsum dolor sit amet</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>e egestas, dui nibh gravida urna</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>orem ipsum dolor sit amet</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>est id, vestibulum vestibulum metu</p>
    <input type="button" value="bring me down!">
  </div>
  <div class="child">
    <img src="http://www.placehold.it/50/50">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam metus felis, porttitor ac est id, vestibulum vestibulum metus. Vestibulum</p>
    <input type="button" value="bring me down!">
  </div>
</div>