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

我在使用flexbox时遇到了一些困难。正如你所看到的，我有一个

旁边的
元素，它保存了一个有序的社交媒体图标列表。由于某些原因，我无法将这些图标粘贴到包含
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>

有人能帮忙吗？我是否错过了显而易见的事情

非常感谢,，
这里有几件事需要考虑：

创建flex容器时，只有子元素成为flex项。子元素之外的任何子元素都不是flex项，flex属性不适用于它们

如果要将flex属性应用于flex项的子项，还需要将flex项设置为flex容器。换句话说，您需要创建嵌套的flex容器

您尚未指定容器的任何高度。因此，每个容器的高度都基于内容的高度。如果内容是一行，那么您实际上没有多少高度

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

<div class="outercontainer group">



唯一的弹性项是

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



，

还有几个注意事项：


在您的订单列表中，您缺少一个开始标记
在我的演示中，高度仅用于演示目的。它们可能不会完全对齐，因为我并没有试图创建一个完美的布局，只是一个说明这个答案如何工作的例子

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