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

你可以这样做：

使用position: absolute ，将按钮固定在bottom并在主div上使用相同的padding-bottom ，以调整按钮的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;
}

此处演示

Answer 2

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