将图标对齐到容器底部的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难题

回答

相关问题