Flexbox difficulties aligning icons to bottom of container

Question

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?

Many thanks, p

Answer 1

Here are a few things to consider:

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.

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

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

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

<div class="outercontainer group">

and the only flex item is...

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

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

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.

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

Couple of more notes:

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