1

I have this row of items I'm displaying at the top of the page but I'm not quite sure how to get one of them to appear at the far right. The rest are aligned to the left. I tried align-self: flex-end but that's not working. Here's the code:

.wrapper {
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
}

a.nav, .search, .query {
    display:inline-block;
} 

.nav {
    margin-left:25px;
}

.nav a {
    margin-right:15px;
    color:#515949;
    transition:0.3s ease;
}

.nav a:hover {
    color:#33382d;
}

.link-right {
    align-self:flex-end;
}
<div class="wrapper">
<div class="nav">
<a href="/" title="link"><span class="lnr lnr-arrow-left"></span></a> 
<a href="/" title="link"><span class="lnr lnr-envelope"></span></a> 
<a href="/" title="link"><span class="lnr lnr-link"></span></a>

<form class="search" action="javascript:return false">
<input type="text" class="query" placeholder="search..."></form>
</div>
<a href="/" class="link-right" title="link"><span class="lnr lnr-plus-circle"></span></a>
</div>

The link with the class link-right is the one I'm trying to get on the right. I don't know if this makes a difference but as you can see there's also a search bar next to the links, also going on the left. Thanks!

A. Meshu
  • 4,053
  • 2
  • 20
  • 34

2 Answers2

0

The align-self property is designed for alignment on the cross axis.

When you're in flex-direction: row (the default setting), the cross axis is vertical.

Therefore, align-self: flex-end is trying to pin your item to the bottom, not the right. Since there's no extra vertical space, there's no place for it to go, and nothing happens.

Try using flex auto margins in this case.

This is really all you need:

nav {
  display: flex;
}

a {
  margin-right: 15px;
}

a:last-child {
  margin-left: auto;
}
<nav>
  <a href="/" title="link">ONE</a>
  <a href="/" title="link">TWO</a>
  <a href="/" title="link">THREE</a>
  <form class="search" action="javascript:return false">
    <input type="text" class="query" placeholder="search...">
  </form>
  <a href="/" title="link">FIVE</a>
</nav>

Learn more about flex alignment along the cross axis here:

Learn more about flex alignment along the main axis here:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
-1

I fixed it for you :)

In .wrapper class all you gotta do is change justify-content : flex-end; to justify-content : space-between;, and set align-items : center;.

Just replace your css with this :

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

a.nav, .search, .query {
  display:inline-block;
} 

.nav {
  margin-left:25px;
}

.nav a {
  margin-right:15px;
  color:#515949;
  transition:0.3s ease;
}

.nav a:hover {
  color:#33382d;
}

Let me know if it worked :)

Just Alex
  • 457
  • 4
  • 6
  • 1
    Hi, thank you! It worked, but for some reason now the link on the right is higher up than everything else? Is there a way to fix that? –  Dec 17 '20 at 21:12
  • Sure thing :) Add this on start of your css : *{ padding: 0px; margin: 0px; } – Just Alex Dec 17 '20 at 21:25
  • 1
    Hey, so sorry to keep bothering you about this but that doesn't seem to have worked :( it only messed with the margins I was using and the link didn't align –  Dec 17 '20 at 21:35
  • Not a problem friend, here you go, just copy the HTML and CSS from my codepen : https://codepen.io/Juka99/pen/GRjErKd Let me know if it works now :) – Just Alex Dec 18 '20 at 10:32
  • The problem was your form tag, I removed it, and now everything works as it should. If you only have a search bar, or some type of input field, but no submit button, there is no reason to wrap it inside a form tag. You can just leave it without a form tag, and then code what will that field to in JavaScript :) – Just Alex Dec 18 '20 at 10:35