フレックスボックスの内部の配置方法は？

Question

私はフレックスボックスを使用しており、ボタンをボトムに合わせたいと思っています。

私はposition absoluteとbottom：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; } 

私はフロートを使用することができますが、フレックスボックスは使用しませんが、フレックスボックスを使用して解決策があるかどうかを確認したいと思います。ここ

デモ： http://jsfiddle.net/NJAAa/

Answer 1

ワーキングWebKitのバージョン：要するにhttp://jsfiddle.net/LLtmE/

：あなたは別のdivにテキストコンテキストを配置する必要があります。 liをフレックスボックスに、box-orientをverticalに設定してください。そしてその絶対/相対位置をすべて削除します。これはもはや必要ありません。

Answer 2

フレックスコンテナは、内容に柔軟性があるため、特定の幅や高さを持たないためです。

私の声明を確実にするには、左または上で試してみてください。それはあなたのデータに反応します。あなたが右または下にしようとすると、反応を見ることができません。フレックスコンテナボックスの元の幅/高さは非常に小さいので。

Answer 3

codepenのthisを確認してください。私はこのヘルプを願っていますし、それが遅くはないです:)

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

そしてthisが参考になっ可能....