Question

我在使用flexbox时遇到了一些困难。如您所见，我有一个aside元素，其中包含社交媒体图标的有序列表。出于某种原因，我无法将这些图标粘贴到包含div的BOTTOM上。

HTML CODE

 <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

Answer 1

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

创建弹性容器时，只有子元素成为弹性项目。子项之外的任何后代元素都是不 flex项目，而flex属性不适用于它们。
如果要将flex属性应用于 flex items 的子项，则还需要将flex项目设置为flex容器。换句话说，您需要创建嵌套的Flex容器。
您没有为容器指定任何高度。因此，每个容器的高度取决于内容的高度。如果内容是单行，那么你的身高确实不高。

因此，在HTML结构中，flex容器是......

<div class="outercontainer group">

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

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

<p>，<aside>，<ol>和<li>是常规块元素。 Flex属性不适用。

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

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

更多笔记：

在您的有序列表中，您错过了一个开头<a>标记。
在我的演示中，高度仅用于演示目的。它们可能不完全对齐，因为我没有尝试创建一个完美的布局，只是说明这个答案的工作原理。

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

1 个答案: