css – Flexbox难以将图标对齐到容器的底部

2023年11月29日 312次阅读

我在使用flexbox时遇到了一些困难.正如您所看到的,我有一个包含社交媒体图标的有序列表的旁边元素.出于某种原因,我无法让这些图标贴在包含div上的BOTTOM上.

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

最佳答案 以下是一些需要考虑的事项：

>创建Flex容器时,只有子元素成为弹性项.子项之外的任何后代元素都不是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>标签.
>在我的演示中,高度仅用于演示目的.它们可能不完全对齐,因为我没有尝试创建一个完美的布局,只是说明这个答案的工作原理.

点赞