Aligning multiple items to the right using Flexbox

While it's common knowledge how to align one item to the right in flexbox, what about aligning multiple items, like the last two elements, to the right and the rest to the left? Take a look at this example where I want elements with the class .r to be aligned to the right of the header menu.

ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    background: #333;
    padding: 15px;
}

ul li {
    padding: 15px;
    margin: 5px;
    background: #efefef;
    border: 1px solid #ccc;
    display: inline-block;
    list-style: none;  
}

.r {
margin-left: auto;
}
<ul>
    <li>Home</li>
    <li>Menu</li>
    <li>More</li>
    <li>Stuff</li>
    <li class="r">Login</li>
    <li class="r">Sign Up</li>
</ul>

Check out the Fiddle here

If you could offer any assistance, it would be greatly appreciated.

htmlcssflexbox

Answer №1

Apply the margin-left: auto property only to the second-to-last flex item.

.r {
  margin-left: auto;
}

ul {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  /* width: 100%; */
  height: 100px;
  background: #333;
  padding: 15px;
}

ul li {
  padding: 15px;
  margin: 5px;
  background: #efefef;
  border: 1px solid #ccc;
  display: inline-block;
  list-style: none;
}
<ul>
  <li>Home</li>
  <li>Menu</li>
  <li>More</li>
  <li>Stuff</li>
  <li class="r">Login</li>
  <li>Sign Up</li>
</ul>

Check out the updated fiddle here.

When you apply margin-left: auto to a flex item, it shifts itself away from its left neighbors and pushes everything on its right along with it.

In this example, using margin-left: auto for the second-to-last child makes sense, but it doesn't make sense for the last child.

Alternatively, you can utilize margin-right: auto on the "Stuff" item:

li:nth-child(4) {
margin-right: auto;
}

ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    background: #333;
    padding: 15px;
}

ul li {
    padding: 15px;
    margin: 5px;
    background: #efefef;
    border: 1px solid #ccc;
    display: inline-block;
    list-style: none;  
}
<ul>
    <li>Home</li>
    <li>Menu</li>
    <li>More</li>
    <li>Stuff</li>
    <li>Login</li>
    <li >Sign Up</li>
</ul>

Answer №2

For a neat solution, try organizing the two links you want to align on the right within a ul element like this:

<ul class="right">
  <li>Login</li>
  <li>Sign Up</li>
</ul>

http://jsfiddle.net/qpEMK/28/

Answer №3

@Michael_B's suggested approach is the one I recommend, but another option is to utilize a pseudo element along with the order attribute to insert the pseudo element into your HTML structure and use flex-grow to fill the space between the left and right sides.

ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    background: #333;
    padding: 15px;
}
ul li {
    padding: 15px;
    margin: 5px;
    background: #efefef;
    border: 1px solid #ccc;
    display: inline-block;
    list-style: none;
}
ul:after {
  content: '';
  flex-grow: 1;
}
.r {
  order: 1;
}
<ul>
    <li>Home</li>
    <li>Menu</li>
    <li>More</li>
    <li>Stuff</li>
    <li class="r">Login</li>
    <li class="r">Sign Up</li>
</ul>

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

Is it possible to create a table using a loop in an SQLite query?

Welcome In the company where I work, Excel is currently being used to manage a large database of items for cost estimation purposes. To simplify this process, I am developing an Electron App that will replace Excel with a more user-friendly interface and ...

javascriptjqueryhtmlsqliteelectron

The outcome of jQuery's division and multiplication is not correct

When a user inputs data into the form fields, the other fields should be automatically filled with the calculated values. However, it appears that jQuery is treating the input values as strings instead of numbers, leading to incorrect calculations. I&apos ...

htmljquery

The fix for the unresponsive fixed container in Angular 2 Material

I've encountered an issue with CSS and Angular 2 material. Any element with a fixed position doesn't behave as expected inside an md-sidenav-container. However, when it is placed outside the container, it works perfectly. I have created a Plunker ...

cssangularangular-material

What sets apart 'hasClass' from 'is'? Additionally, is there a substitute to retrieve a Jquery element instead?

Similar Question: jQuery .hasClass() vs .is() Sample HTML code: <div class="results"> <div class="table"> <form class="tr" action="#" method="post"> <div class="td"> <input class="dat ...

javascriptjqueryhtmlfilter

Transforming the table into a list by categorizing every 3 rows together

SharePoint tends to use nested tables excessively, causing issues when trying to implement a jQuery carousel on them. To resolve this, I discovered a piece of jQuery code that can convert a table into a list: var list = $("<ul/>"); $('#tab1&apo ...

jqueryhtml

Log into your account by choosing a button using Selenium with Python

While attempting to access my account via this specific link on the Market Watch webpage using Python and Selenium, I encountered a roadblock. Despite successfully selecting the "Sign In" button, no action is triggered, preventing me from entering the desi ...

pythonhtmlseleniumbuttoncss-selectors

What is the best way to overlay my slider with a div containing content?

In the hero section of my website, there is a slider with 3 slides. I am looking to add a div element that will display content over these slides at all times, regardless of which slide is currently showing. ...

htmlcss

Optimal method for utilizing @font-face syntax

Recently, I've been utilizing this specific model @font-face { font-weight: WEIGHT; font-style: STYLE; font-family: 'NAME'; src: url('font.eot'); src: url('https://dl.dropboxusercontent.com/s/dey3lzjdpgszxzt/myriad-webfont.eo ...

htmlcssfontsfont-face

The blur filter in Safari causes colors to appear distorted

I am having an issue trying to add a blur filter to an SVG element. It appears that Safari is not rendering the colors correctly. Take a look at this example: <svg height="110" width="110"> <defs> <filter id="f1" x="0" y="0"&g ...

jqueryhtmlsvgsafarisvg-filters

When using the HTML code <p></p>, the empty paragraph tag does not create a line break

We have a .NET application that saves messages in axml format. Our task is to convert these messages into html. After some research, I came across a 3rd party library called "HtmlFromXamlConverter" that does this job, but with one issue: when the axml cont ...

htmlcss

The icons in webviews on mobile apps (iOS and Android) fail to render correctly

My font icons are behaving inconsistently on webkit-based mobile browsers when used on mobile devices. When hovering over the span on a desktop browser, the icon properly fills its container: https://i.sstatic.net/qzrmz.png However, when hovering over t ...

htmlcsswebviewuiwebviewandroid-webview

Position the read more buttons in JavaScript at the bottom of the div

I designed three boxes in this section with content inside. To enhance the functionality, I added a feature that made the boxes smaller. Everything was functioning perfectly, but I encountered an issue with the alignment of the buttons at the bottom. Is th ...

javascripthtmljquerycss

Arrange pictures and div elements in a horizontal layout

I am facing an issue with my code that is displaying 5 'cards' in a messed up layout instead of a straight line. I have tried to align them vertically, but some are still higher and not in the right positions. For reference, I want the layout to ...

javascripthtmlcssimage

Turning off and on CSS transitions to set the initial position

Is there a way in javascript to position divs with rotations without using transitions initially for an animation that will be triggered later by css transition? I have tried a codepen example which unfortunately does not work on the platform but works fin ...

javascriptcsscss-transitions

Having difficulty changing the visibility of a div with Javascript

I've developed a piece of vanilla JavaScript to toggle the visibility of certain divs based on the field value within them. However, I'm encountering an issue where trying to unhide these divs using getElementById is resulting in null values. D ...

javascripthtml

Having trouble getting the onclick function to work in order to switch out the images

This is the HTML code that I used Here is the JavaScript code, but the onclick function seems to not be working ...

javascripthtmlonclick

Combine the text of the button onto a single line

It seems like my button text appears fine on Safari, but in Google Chrome the issue arises. When you first arrive at the button, everything looks okay. However, after navigating through more posts and encountering the load more button again, the text gets ...

csswordpressbuttonalignmentwidth

What is the process for modifying the design of an NPM package?

I may have a silly or incorrect question, but what exactly is the extent of default styling in an NPM package? If I am using an NPM package and wish to adjust the color of one of their elements, how should I go about it? In both my own index.css file and ...

cssreactjsnpm

How to trigger a JavaScript function using a link in CakePHP?

When working with Html, <a href="some_url"> Contact Seller </a> In the realm of Cakephp, <?php echo $this->Html->link('Contact Seller', array('controller'=>'pages', 'action'=>'conta ...

javascriptphphtmlcakephp

What's the best way to stack two input fields vertically and combine them into a single unit?

My goal is to have two inputs placed inside a container, one above the other with no space in between and without separate borders for each input. I am using Bootstrap, but so far my attempts with vertical alignment have been unsuccessful. Here is the code ...

htmlcssinputbootstrap-4alignment