如何在柔性盒内定位？

Question

我正在使用弹性框,并希望将按钮对齐到底部.

我使用的是绝对位置和底部:0,但浏览器忽略它.

<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; }

我可以使用浮动而不使用flex-box,但我想看看是否有使用flex-box的解决方案.

在这里演示:http: //jsfiddle.net/NJAAa/

Answer 1

工作 WebKit 版本： http: //jsfiddle.net/LLtmE/

简而言之：您需要将文本上下文放在单独的div;中。将每个设置li为 Flexbox 并设置box-orient为vertical。并删除所有绝对/相对定位 - 不再需要。