將圖標對齊到容器底部的Flexbox難題

我在使用flexbox時遇到了一些困難。正如你所看到的，我有一個aside元素，它包含社交媒體圖標的有序列表。出於某種原因，我無法將這些圖標粘貼到包含div的BOTTOM上。將圖標對齊到容器底部的Flexbox難題

HTML代碼

<div class="outercontainer group"> 
     <div class="dividing-row span_1_of_2 col"> 
     <p> here is some text </p>  
      <aside> 
       <ol class="category-name"> 
       <li><i class="fa fa-pinterest-p"></i></a></li> 
       <li><i class="fa fa-flickr"></i></a></li> 
       </ol> 
      </aside>  
     </div> 
    </div>

CSS代碼

.outercontainer // this keeps all containers the same height in fluid design 
{ 
display: flex; 
flex-wrap: wrap; 
} 


ol.category-name 
{ 
display: inline-block; 
color: #FFF; 
align-self: flex-end!important; // this does not work 
}

誰能幫助？我錯過了明顯的？

非常感謝， p

來源

2015-10-19 stckpete

這裏有一些事情要考慮：

當您創建Flex容器只有子元素變得彎曲的物品。超出子項的任何後代元素都是而不是彈性項目和彈性屬性不適用於它們。
如果要將柔性屬性應用於柔性項目的子項，則還需要將柔性項目設置爲柔性容器。換句話說，您需要創建嵌套的柔性容器。
您尚未爲容器指定任何高度。所以每個容器的高度都是基於內容的高度。如果內容是單行的，那麼你的高度並不高。

因此，在你的HTML結構，柔性容器...

<div class="outercontainer group">

，唯一的柔性產品...

<div class="dividing-row span_1_of_2 col">

的<p>，<aside>，<ol>和<li>是常規的塊元素。 Flex屬性不適用。

如果您想要使用彈性屬性來對齊容器底部的社交媒體圖標，則需要使父容器成爲彈性容器並給它一個高度。

這裏有更多的細節演示：http://jsfiddle.net/f1qnjwd3/1/

夫婦的更多注意事項：

在你的有序列表，你錯過的開口<a>標籤。
在我的演示中，高度僅用於演示目的。他們可能並不完美，因爲我沒有試圖創建一個完美的佈局，只是說明這個答案是如何工作的。

來源

2015-10-19 15:18:10

將圖標對齊到容器底部的Flexbox難題

回答

相關問題