Flexbox 难以将图标与容器底部对齐

我在使用 Flexbox 时遇到了一些困难。如你所见，我有一个aside包含社交媒体图标的有序列表的元素。由于某种原因，我无法将这些图标粘在包含的内容的底部div.

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

以下是需要考虑的一些事项：

1. 当您创建 Flex 容器时，只有子元素成为 Flex 项目。子元素之外的任何后代元素都是notFlex 项目和 Flex 属性不适用于它们。

2. 如果您想将 flex 属性应用于弹性项目，您还需要将 Flex 项目设为 Flex 容器。换句话说，您需要创建嵌套的弹性容器。

3. 您尚未指定容器的任何高度。所以每个容器的高度是根据内容的高度而定的。如果内容是单行，那么你确实没有太多高度。

所以在你的 HTML 结构中，flex 容器是......

<div class="outercontainer group">

唯一的弹性项目是......

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

The <p>, <aside>, <ol> and <li>是常规块元素。 Flex 属性不适用。

如果您想使用 Flex 属性来对齐容器底部的社交媒体图标，则需要将父级设置为 Flex 容器并为其指定高度。

这是一个包含更多详细信息的演示：http://jsfiddle.net/f1qnjwd3/1/ http://jsfiddle.net/f1qnjwd3/1/

更多注意事项：

• 在您的订购列表中，您缺少一个空缺职位<a> tag.
• 在我的演示中，高度仅用于演示目的。它们可能无法完美对齐，因为我并没有尝试创建完美的布局，只是说明这个答案是如何工作的。