Jak pozycjonować wnętrze w skrzynce flex?

Question

Używam Flex Box i chcę wyrównać przycisk do dołu.

Używam pozycji absolutnej i dolnej: 0, ale przeglądarka ignoruje ją.

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

mogę używać pływaka i nie używać Flex-box, ale chcę, aby sprawdzić, czy istnieje rozwiązanie tego przy użyciu giętkiego pudełku.

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

Answer 1

WebKit robocza wersja: http://jsfiddle.net/LLtmE/

W skrócie: trzeba umieścić swój kontekst tekstu w osobnym div; dokonaj każdego z nich przy użyciu flexbox i ustaw box-orient na vertical. I usuń całe to bezwzględne/względne pozycjonowanie - nie jest już konieczne.

Answer 2

Powód jest taki, że elastyczny pojemnik nie ma określonej szerokości ani wysokości, ponieważ jest elastyczny w swojej zawartości.

Aby zapewnić moje oświadczenie, spróbuj z lewej lub góry, będzie reagować na dane. Jeśli spróbujesz z prawą lub na dole, nie możesz zobaczyć reakcji. Ponieważ oryginalna szerokość/wysokość pojemnika elastycznego jest bardzo mniejsza.

Answer 3

Sprawdź this na porcie kodowym. Mam nadzieję, że to pomoże i że nie jest późno :)

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

I this może być pomocny ....