如何在柔性盒內放置？

我正在使用彈性盒，並希望將按鈕對齊到底部。如何在柔性盒內放置？

我使用position絕對和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; }

我可以使用浮動，而不是使用柔性盒，但我想看看是否有這個使用Flex盒的解決方案。

演示在這裏： http://jsfiddle.net/NJAAa/

來源

2011-07-21 dean

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

簡而言之：你需要把你的文本上下文在一個單獨的div;使每個li爲flexbox並將box-orient設置爲vertical。並刪除所有絕對/相對定位 - 它不再是必要的。

來源

2011-07-21 17:55:27

原因是柔性容器沒有特定的寬度或高度，因爲它的內容靈活。

爲了確保我的陳述，試着用left或top，它會對你的數據做出反應。如果你嘗試右或底，你不能看到反應。由於Flex容器盒的原始寬度/高度非常小。

來源

2015-07-09 12:44:59

在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可以是有益的....

來源

2017-03-07 22:40:56

如何在柔性盒內放置？

回答

相關問題