Unable to align only one link on the right as flex-end is not functioning correctly

I need help rearranging my row of items displayed at the top of the page. I want one item to appear on the far right while the rest are aligned to the left. I attempted using align-self: flex-end but it didn't work. Here's the current code snippet:

.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>

I'm specifically trying to move the link with the class link-right to the right side. Also, there is a search bar next to the links that needs to remain on the left. Any suggestions would be appreciated! Thank you.

htmlcssflexbox

Answer №1

The align-self property is specifically used for aligning items on the cross axis.

When the flex-direction is set to row (which is the default), the cross axis becomes vertical.

So, applying align-self: flex-end will attempt to position your item at the bottom rather than the right. However, if there is no extra vertical space available, the item won't move anywhere and nothing noticeable will happen.

In such cases, you can try using auto margins with flex.

This simple CSS snippet should achieve the desired result:

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>

For more information on flex alignment on the cross axis, check out this link:

  • How does flex-wrap work with align-self, align-items and align-content?

To learn about flex alignment along the main axis, visit this link:

  • In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer №2

Hey, I made some changes for you!

If you're working with the .wrapper class, all you need to do is update justify-content : flex-end; to justify-content : space-between;, and include align-items : center;.

Here's the updated css:

.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 for you! 😊

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate JavaScript values into an HTML form to submit them to PHP

How can I successfully POST the values of 'vkey' and 'gene+varient' when submitting a form in HTML? The values are retrieved using JS code and displayed correctly on the form, but are not being sent upon submission. <form action="ac ...

javascriptphphtml

Angular - Brilliant time selection tool (BTS) The TimePicker feature fails to automatically switch to selecting minutes after choosing the hour

I'm currently implementing the Amazing time picker in my app and I'm facing an issue where it doesn't automatically switch to minutes after selecting the hour. component.html <input type="time" atp-time-picker formControlName="time" cla ...

javascripthtmlarraysjsonangular

Efficient Django Template: Accurate Conversion of Values through Dictionary Searching

I have an object with an attribute that has specific choices defined in its class: class StashURLJobRequest(models.Model): STATUS_CHOICES = ((0,"Requested"),(1,"Done"),(2,"Failed")) url = models.URLField() created = models.DateTimeField(auto_n ...

pythoncssdjango

Skipping a JSON field in HTML/JavaScript when it is blank: A guide for developers

To develop an interactive program based on JSON input, I aim to display headers, subheaders, and choices derived from the JSON data. Some input fields may remain unfilled. For instance: Header Subheader Choice 1 Choice 2 Subheader2 Choice ...

javascripthtmljson

Adjusting the input label to be aligned inside the input box and positioned to the right side

I am currently working on aligning my input label inside the input box and positioning it to float right. The input boxes I am using have been extended from b4. Currently, this is how it appears (see arrow for desired alignment): https://i.stack.imgur.co ...

htmlcssvue.js

Modifying a single element within a class with Jquery

Is it possible to create a stack of pages on a website using JQuery? I found this image that shows what I'm trying to achieve: image. Instead of applying ID css for each page, I'd like to use JQuery. While researching similar questions, I came ac ...

javascriptjquerycssstackpositioning

What steps should I follow to make a sticker adhere to a div?

I'm currently in the process of designing a sticker that attaches to the top of a div, much like this: https://i.sstatic.net/aG329.png <div className="upgrade-premium"> <div className="upgrade-team"> <h1>Prem ...

htmlcsssass

One of the unique CSS properties found in the NextJS setup is the default 'zoom' property set to

Even though I already found a solution to the problem, I can't help but wonder what the author meant by it. Hopefully, my solution can help others who may encounter the same issue. After installing the latest NextJS version 13.2.4 on my computer, I e ...

cssreactjsnext.js

What is the best way to ensure my background image adjusts properly for both iPhones and Android devices to be responsive?

I have set the background image in my CSS to fit perfectly without any need for adjustments. The goal is for the image to resize itself when viewed on mobile devices or tablets. .intro { display: table; width: 100%; height: auto; padding: ...

htmlcssiphoneresponsive-design

Is it possible to execute a function defined within an eval() function using setInterval()?

const evaluation = eval(document.getElementById("codearea").value); setInterval(evaluation, 10); I am seeking a way to access a function that is declared within the eval function, for example: setInterval(evaluation.examplefunc, 10) I attempted ...

javascripthtmlthree.js

Struggling to align my overlay accurately by combining absolute and relative positioning

I'm currently tackling a frontend mentor project, and I've hit a roadblock trying to get my image overlay to position itself over the image rather than below it. I've set the parent position to relative and the overlay to absolute, but so fa ...

htmlcsscss-position

Explain the concept of paragraph spacing in Word, including how it is

When working with my ms word 2010 document, I often use the includetext-function to incorporate HTML content: { INCLUDETEXT "test.html" } Here is an example of the HTML code that I am trying to include: <html> <head> <meta http-equiv="Co ...

htmlcssms-wordparagraph

Invalid template detected within the Kendo dropdown component

I am trying to create a template that will only be displayed if the data value is "Low". This is how I have set up my template column: template: '# if( data=="Low" ){#<span><i class="fa fa-square blue"></i> <span># } ' U ...

javascriptjquerycssangularjskendo-ui

My div is becoming overly wide due to padding and margin issues

Looking at this div: <!------ CODE SNIPPET ------> <div id="content"> <div class="top"> I am cool<br /> I am cool<br /> I am cool<br /> I am cool<br /> </div> </div> <!------ /CODE SNIPP ...

htmlcsswindowpaddingmargin

Tips for loading a webpage with optimal speed and efficiency

I am inspired by the sleek design of Apple's website and want to replicate some of its features in my project (best viewed on FF, Chrome, Safari): Initially, the page appears empty except for the header - but the final height of the page is already ...

jqueryajaxhtmlcss

Angular Material Toolbar Experiencing Color Distortion

To see the issue in action, check out this CodePen: An ongoing problem I've encountered with Angular Material involves distorted colors on the toolbar. The edges of the toolbar display one shade of green, while the middle shows a different shade. Tak ...

javascripthtmlangularjsangular-material

continuously repeating css text animation

How do I create an animation loop that slides infinitely, repeating non-stop in full screen without breaking at 'hello5'? I want to display 3 rows of the same item from my items array. Not sure which CSS is causing the issue. The result I am loo ...

htmlcssvue.js

jQuery mCustomScrollbars does not correctly resize the height of the div on the initial load

Need help with resizing the height of a div. Currently, I am setting the height of the div using JavaScript, but it only takes effect after refreshing the page (F5). Is there a way to make it work without needing a refresh? Check out the code snippet be ...

phpjquerycsshtml

By clicking on the image, you can expand it to a specific size, and clicking again will return it to its original size. This feature maintains the exact

There have been numerous inquiries regarding how to make an image larger on click, and then revert back to its original size upon clicking again. I've spent the past 10 hours experimenting with many solutions, but none of them achieve the desired out ...

htmlcssimage

The CSS background fails to expand to the entire height of the element

I'm encountering an issue where an element with 100% height is extending beyond its boundaries when there are multiple blocks. For a demonstration, you can refer to this jsfiddle example: http://jsfiddle.net/yPqKa/ Any suggestions on how to resolve ...

htmlcss