CODEWITHSUNDEEP
cssflexbox
ツ.jp
ツ.jp

Reputation: 315

Flexbox Nav Menus

I am trying to create a nav menu with a single (or more) item pinned to the left.

I have tried using align-self: flex-start; but it won't budge unless flex: 1; is set in which case the item fills all remaining space, which I do not want.

HTML:

<ul>
   <li class="left">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>

I want this:

| [ 1 ]            [ 2 ] [ 3 ] [ 4 ] |

or

| [ 1 ] [ 2 ]            [ 3 ] [ 4 ] |

Not:

| [ 1            ] [ 2 ] [ 3 ] [ 4 ] |

or

| [ 1 ] [ 2            ] [ 3 ] [ 4 ] |

The effect I want would be applied with a class left as all items are justify-content: flex-end; currently

Upvotes: 0

Views: 297

Answers (1)

Marwelln
Marwelln

Reputation: 29433

What you want to do is to add margin-left:auto; to your first right-aligned element. This will push that element and all the next elements to the right.

nav {
    background:#d8d8d8;
    display:flex;
    padding:1px;
}

a {
    background:white;
    margin-right:1px;
    padding:3px;
}
a.start_right { margin-left:auto; } 
a:last-child { margin-right:0; }
<nav>
    <a href='#'>Link 1</a>
    <a href='#' class='start_right'>Link 2</a>
    <a href='#'>Link 3</a>
    <a href='#'>Link 4</a>
</nav>

Upvotes: 1

Related Questions