Children of flex box don't align to bottom (flex end)

Question

I'm just introducing myself to flexbox and from what I understand if I have a flex parent, then I can align the children of the parent that are on a single row with the align-items rule. However, my children are not changning their alignment as seen here: https://jsfiddle.net/b9L09gsa/

The content remains at the top instead of at the bottom like I would like. The idea is to have the logo div and nav items align neatly at the bottom. Clearly I don't understand something, any help would be great!

A useful reference I look back to constantly is [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — Blazemonger, Jun 06 '17 at 20:41

Blazemonger · Accepted Answer · 2017-06-07T11:22:10.080

You need those properties on the flex container, not the flex items:

#nav-contain {
    display:flex;
    justify-content: flex-end;
    align-items: flex-end;
}
#logo, .nav-item-contain {
    flex-grow: 1;
}

https://jsfiddle.net/b9L09gsa/1/

To override individual flex items, use align-self instead:

#nav-contain {
    display:flex;
    justify-content: flex-end;
}
#logo, .nav-item-contain {
    flex-grow: 1;
    align-self: flex-end;
}

https://jsfiddle.net/b9L09gsa/2/

Children of flex box don't align to bottom (flex end)

1 Answers1