Làm thế nào để định vị bên trong hộp flex?

Question

Tôi đang sử dụng hộp flex và muốn căn chỉnh nút ở phía dưới.

Tôi đang sử dụng vị trí tuyệt đối và dưới cùng: 0, nhưng trình duyệt bỏ qua nó.

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

Tôi có thể sử dụng phao và không sử dụng hộp flex, nhưng tôi muốn xem có giải pháp cho việc sử dụng hộp này hay không.

bản demo ở đây: http://jsfiddle.net/NJAAa/

Answer 1

Working WebKit phiên bản: http://jsfiddle.net/LLtmE/

Nói tóm lại: bạn cần phải đặt bối cảnh văn bản của bạn trong một riêng biệt div; làm cho mỗi li một flexbox và đặt box-orient thành vertical. Và loại bỏ tất cả các vị trí tuyệt đối/tương đối - nó không còn cần thiết nữa.

Answer 2

Lý do là thùng chứa flex không có chiều rộng hoặc chiều cao cụ thể, vì nó linh hoạt với nội dung của nó.

Để đảm bảo tuyên bố của tôi, hãy thử với trái hoặc trên, nó sẽ phản ứng cho dữ liệu của bạn. Nếu bạn cố gắng với bên phải hoặc dưới cùng, bạn không thể thấy phản ứng. Kể từ khi flex container hộp ban đầu chiều rộng/chiều cao là rất ít.

Answer 3

Kiểm tra this trên codepen. Tôi hy vọng sự giúp đỡ này và đó không phải là muộn :)

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

Và this có thể hữu ích ....