Move last
element to bottom of container with the rest centered

Question

I'm trying to get my menu centered using flexbox centering in the middle of the bar while the last element is pushed to the bottom of the container.

Here is my JSfiddle.

I've tried with align-self flex-end with no success and

li:last-child {
    margin-top: auto;
}

That aligns my the last element to the bottom but pushes the rest of the items to the other end of the container.

If you add `li:first-child { margin-top: auto; }` it will work though — Asons, Nov 18 '18 at 18:16
Possible duplicate of https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties?noredirect=1&lq=1 — Asons, Nov 18 '18 at 18:27

Itay Gal · Accepted Answer · 2018-11-18T18:55:32.633

4

You can add another empty <li> at the beginning of the list and give him the flex-grow:1 property, and then set it to the last li as well. Here's an example

It might work without an extra element, just set the first li to have flex-grow:1. Second example here

Note that you'll have to keep your text inside the first element aligned to the bottom.

edited Nov 18 '18 at 18:55

answered Nov 18 '18 at 18:43

Itay Gal

10,706
6
36
75

Move last element to bottom of container with the rest centered

1 Answers1

Move last
element to bottom of container with the rest centered