align first element to left in flex box

Question

nav {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

nav a {
  padding: .4rem;
}

.logo {
  justify-self: start;
  display: block;
}

<nav>
  <a href="/" class="logo"><img src="/static/logo.svg" alt="PurelyGigs" /></a>
  <a href="/gigs">Gigs</a>
  <a href="/login">Login</a>
  <a href="/register">Signup</a>
</nav>

I'm trying to align the logo only to the left and the other three nav items to the right using flex-box...without having to use a wrapper

score 4 · Answer 1 · answered Oct 14 '22 at 07:11

4

You can use margin-left: auto; for the second link. It also allows for simplification of the rest of your CSS. If you prefer, you can use a class for the second link.

nav {
  display: flex;
}

nav a {
  padding: .4rem;
}

.logo {
  display: block;
}

/* Added */

nav a:nth-child(2) {
  margin-left: auto;
}

<nav>
  <a href="/" class="logo"><img src="/static/logo.svg" alt="PurelyGigs" /></a>
  <a href="/gigs">Gigs</a>
  <a href="/login">Login</a>
  <a href="/register">Signup</a>
</nav>

answered Oct 14 '22 at 07:11

Gerard

15,418
5
30
52

2

@chovy margin-right: auto for the logo would be more logical – Temani Afif Oct 14 '22 at 08:46
1

Nice done @TemaniAlif too. That's a shortcut! – tatactic Oct 14 '22 at 09:53

Maharkus · Accepted Answer · 2022-10-14T07:20:22.157

3

Another way to do this would be using CSS Grid. We declare one column, that has a width of 1fr (fr meaning fraction, more information on this can be found here), meaning it takes up all the space left in the container. This is where the first element - in this case the logo - is added. The other elements get added using grid-auto-flow, which means that elements inside the container that would not fit in the provided columns are inserted in auto generated columns without the previously specified width.

Edit: added links being aligned to the bottom.

nav {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
  height: 200px;
}

nav a {
  padding: .4rem;
  align-self: end;
}

.logo {
  height:100px;
}

<nav>
  <a href="/" class="logo"><img src="/static/logo.svg" alt="PurelyGigs" /></a>
  <a href="/gigs">Gigs</a>
  <a href="/login">Login</a>
  <a href="/register">Signup</a>
</nav>

edited Oct 14 '22 at 07:20

answered Oct 14 '22 at 07:12

Maharkus

2,841
21
35

Can you explain what is going on here? – chovy Oct 14 '22 at 07:14
also is there anyway to make the links be at the bottom? The image for logo is quite taller than the links. – chovy Oct 14 '22 at 07:19
edited the question to adress your questions :) – Maharkus Oct 14 '22 at 07:22

score 1 · Answer 3 · answered Oct 14 '22 at 07:07

Please try this

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav a {
  padding: .4rem;
}

.logo {
  justify-self: start;
  display: block;
}

<nav>
  <span>
        <a href="/" class="logo"><img src="/static/logo.svg" alt="PurelyGigs" /></a>
    </span>
  <span>
        <a href="/gigs">Gigs</a>
        <a href="/login">Login</a>
        <a href="/register">Signup</a>
    </span>
</nav>

code

align first element to left in flex box

3 Answers3