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

子级基本上是一列，因此您可以使用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>

Answer 2

您可以这样做：

使用position: absolute固定bottom上的按钮，并将相同的padding-bottom提供给主div以调整您的height按钮需求。

CSS

.parent {
    width: 500px;
    display: flex;
    flex-wrap: wrap;
}
.parent .child {
    border: 1px solid black;
    flex: 1 1 32%;
    position:relative;
    padding-bottom: 20px;
    box-sizing: border-box;
}
.parent .child img {
    max-width: 100%;
}
.parent .child input {
    width: 100%;
    bottom: 0;
    position: absolute;
}

演示此处