将弹性项目的内容与底部对齐

Question

Very simple, a container has to have its children stretched (as they are), but the content of the children divs has to be aligned to the bottom, same as flex-end but while maintaining the height.

Any ideas about how to do that?

Take a look at this pen: http://codepen.io/anon/pen/NAjRvo

 .container { height: 100px; background: BurlyWood; display: flex; align-items: stretch; } .item{ flex:1; margin: 4px; background: Crimson; } .item p { margin: 0; text-align: center; } 

 <div class="container"> <div class="item"> <p>lorem</p> </div> <div class="item"> <p>ipsum</p> </div> <div class="item"> <p>dolor</p> </div> </div> 

Answer 1

Make the children flex-containers as well.. then align accordingly

 .container { height: 100px; background: BurlyWood; display: flex; } .item{ flex:1; margin: 4px; background: Crimson; display: flex; justify-content: center; align-items: flex-end; } .item p { margin: 0; text-align: center; } 

 <div class="container"> <div class="item"> <p>lorem</p> </div> <div class="item"> <p>ipsum</p> </div> <div class="item"> <p>dolor</p> </div> </div> 

Or similarly with flex-columns

 .container { height: 100px; background: BurlyWood; display: flex; } .item{ flex:1; margin: 4px; background: Crimson; display: flex; flex-direction: column; justify-content: flex-end; } .item p { margin: 0; text-align: center; } 

 <div class="container"> <div class="item"> <p>lorem</p> </div> <div class="item"> <p>ipsum</p> </div> <div class="item"> <p>dolor</p> </div> </div> 

Answer 2

In addition to the keyword properties already mentioned, you can also use flex auto margins :

 .container { height: 100px; background: BurlyWood; display: flex; align-items: stretch; } .item { flex: 1; margin: 4px; background: Crimson; justify-content: center; text-align: center; display: flex; /* NEW */ } .item p { margin: auto 0 0 0; /* ADJUSTED */ } 

 <div class="container"> <div class="item"> <p>lorem</p> </div> <div class="item"> <p>ipsum</p> </div> <div class="item"> <p>dolor</p> </div> </div> 

Answer 3

You can use position absolute for that.

In order to keep the text centered, you need left and right:0 .

 .container { height: 100px; background: BurlyWood; display: flex; align-items: stretch; } .item{ flex:1; margin: 4px; background: Crimson; position:relative; } .item p { margin: 0; text-align: center; position:absolute; bottom:0; left:0; right:0; } 

 <div class="container"> <div class="item"> <p>lorem</p> </div> <div class="item"> <p>ipsum</p> </div> <div class="item"> <p>dolor</p> </div> </div> 

---

You could also use grow on one element, so the other will just take space that it requires. This is not a real clean solution in my eyes, but it works:

 .container { height: 100px; background: BurlyWood; display: flex; align-items: stretch; } .item{ flex:1; margin: 4px; background: Crimson; display:flex; flex-direction: column; } .item div { flex:1; } .item p { margin: 0; text-align: center; } 

 <div class="container"> <div class="item"> <div>&nbsp;</div> <p>lorem</p> </div> <div class="item"> <div>&nbsp;</div> <p>ipsum</p> </div> <div class="item"> <div>&nbsp;</div> <p>dolor</p> </div> </div>