Flexbox难以将图标对齐到容器底部 [英] Flexbox difficulties aligning icons to bottom of container

问题描述

我对flexbox有些困难。正如你所看到的，我有一个 aside 元素，它包含社交媒体图标的有序列表。由于某些原因，我无法将这些图标粘贴到包含 div 的BOTTOM。

I'm having some difficulties with flexbox. As you can see, I have an aside element that holds an ordered list of social media icons. For some reason, I'm unable to make these icons stick to the BOTTOM on the containing div.

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 CODE

.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 
}

任何人都可以帮助？我缺少明显吗？

Can anyone help? am I missing the obvious?

非常感谢，
p

Many thanks, p

推荐答案

几个事情要考虑：

1. 创建flex容器时，只有子元素成为flex项。

1. When you create a flex container only the child elements become flex items. Any descendant elements beyond the children are not flex items and flex properties don't apply to them.

如果您要应用这些子元素， flex属性的 flex项目，你需要使flex项目flex容器，以及。换句话说，您需要创建嵌套的flex容器。

If you want to apply flex properties to the children of flex items, you need to make the flex item a flex container, as well. In other words, you need to create nested flex containers.

您尚未为容器指定任何高度。所以每个容器的高度是基于内容的高度。

You haven't specified any heights for your containers. So the height of each container is based on the height of the content. If the content is a single row, you really don't have much height.

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

So in your HTML structure, the flex container is...

<div class="outercontainer group">

且唯一的flex项目是...

and the only flex item is...

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

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

The <p>, <aside>, <ol> and <li> are regular block elements. Flex properties don't apply.

如果您要使用flex属性来对齐容器底部的社交媒体图标，您需要使父级为flex

If you want to use flex properties to align the social media icons at the bottom of the container, you need to make the parent a flex container and give it a height.

这是一个演示更多细节： http://jsfiddle.net/f1qnjwd3/1/

Here's a demo with more details: http://jsfiddle.net/f1qnjwd3/1/

几个注释：

• 在您的有序列表中，缺少一个开头< a> li>
  
• 在我的演示中，高度仅用于演示目的。它们可能不完全对齐，因为我不是想创建一个完美的布局，只是一个说明这个答案如何工作的例子。

• In your ordered list, you're missing an opening <a> tag.
• In my demo, the heights are for demo purposes only. They may not align perfectly because I wasn't trying to create a perfect layout, just an illustration of how this answer works.

这篇关于Flexbox难以将图标对齐到容器底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！