How to place inside a flexible box?

Question

I am using flex box and want to align the button to the end.

I use the absolute position and bottom: 0, but the browser ignores it.

<ul class="box"> <li><div>this has <br> more <br> <button>one</button></div></li> <li><div>this has <br> more <br> content <br> <button>one</button></div></li> <li>d<div><button>one</button></div></li> </ul> ul { /* basic styling */ width: 100%; height: 100px; border: 1px solid #555; /* flexbox setup */ display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box; -moz-box-orient: horizontal; display: box; box-orient: horizontal; } .box > li { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; margin: 0 1px; padding-bottom: 20px; border-bottom: 20px solid red; position: relative; } button { position: absolute; bottom: 0; } /* our colors */ .box > li:nth-child(1){ background : #FCC; } .box > li:nth-child(2){ background : #CFC; } .box > li:nth-child(3){ background : #CCF; } 

I can use float and not use flex-box, but I want to see if there is a solution for this with flex-box.

demo here: http://jsfiddle.net/NJAAa/

Answer 1

Working version of WebKit: http://jsfiddle.net/LLtmE/

In short: you need to place your text context in a separate div ; make each li a flexbox and set box-orient to vertical . And to remove all this absolute / relative positioning - this is no longer necessary.

Answer 2

The reason is that the flexible container does not have a specific width or height, since it is flexible with its contents.

To provide my statement, try with the left or top one, it will respond to your data. If you try correctly or from below, you cannot see the reaction. Since the width / height of the container for flexible containers is very small.

Answer 3

Check this one on codepen. I hope this help is not too late :)

 ul { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: 80%; margin: 10% auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #b2b2b2; box-shadow: 2px 2px 3px #666666; } ul > li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } ul > li > button { margin: 20px; padding: 5px 15px; cursor: pointer; } ul > li > button:hover { color: whitesmoke; background-color: maroon; } /* our colors */ ul > li:nth-child(1) { background: #000000; } ul > li:nth-child(2) { background: #191919; } ul > li:nth-child(3) { background: #323232; } 

And this one may be useful ....