How to Right-align flex item?

HtmlCssFlexbox

Html Problem Overview

Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute?

.main {
  display: flex;
}

.a,
.b,
.c {
  background: #efefef;
  border: 1px solid #999;
}

.b {
  flex: 1;
  text-align: center;
}

.c {
  position: absolute;
  right: 0;
}


<h2>With title</h2>
<div class="main">
  <div class="a"><a href="#">Home</a></div>
  <div class="b"><a href="#">Some title centered</a></div>
  <div class="c"><a href="#">Contact</a></div>
</div>

<h2>Without title</h2>
<div class="main">
  <div class="a"><a href="#">Home</a></div>
  <!--<div class="b"><a href="#">Some title centered</a></div>-->
  <div class="c"><a href="#">Contact</a></div>
</div>

http://jsfiddle.net/vqDK9/

Html Solutions

Solution 1 - Html

A more flex approach would be to use an auto left margin (flex items treat auto margins a bit differently than when used in a block formatting context).

.c {
    margin-left: auto;
}

Updated fiddle:

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}


<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

Solution 2 - Html

Here you go. Set justify-content: space-between on the flex container.

.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }


<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
<!--     <div class="b"><a href="#">Some title centered</a></div> -->
    <div class="c"><a href="#">Contact</a></div>
</div>

Solution 3 - Html

You can also use a filler to fill the remaining space.

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

I have updated the solution with 3 different versions. This because of the discussion of the validity of using an additional filler element. If you run the code snipped you see that all solutions do different things. For instance setting the filler class on item b will make this item fill the remaining space. This has the benefit that there is no 'dead' space that is not clickable.

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="filler b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

Solution 4 - Html

If you want to use flexbox for this, you should be able to, by doing this (display: flex on the container, flex: 1 on the items, and text-align: right on .c):

.main { display: flex; }
.a, .b, .c {
	background: #efefef;
	border: 1px solid #999;
	flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

...or alternatively (even simpler), if the items don't need to meet, you can use justify-content: space-between on the container and remove the text-align rules completely:

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

Here's a demo on Codepen to allow you to quickly try the above.

Solution 5 - Html

Or you could just use justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

Solution 6 - Html

As easy as

.main {
    display: flex;
    flex-direction:row-reverse;
}

Solution 7 - Html

Add the following CSS class to your stylesheet:

.my-spacer {
    flex: 1 1 auto;
}

Place an empty element between the element on the left and the element you wish to right-align:

<span class="my-spacer"></span>

Solution 8 - Html

margin-left: auto works well. But clean flex box solution would be space-between in the main class. Space between works well if there is two or more elements. I have added a solution for single element as well.

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; padding: 0.25rem; margin: 0.25rem;}
.b { flex: 1; text-align: center; }

.c-wrapper {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.c-wrapper2 {
  display: flex;
  flex: 1;
  flex-flow: row-reverse;
}


<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="main">
    <div class="c-wrapper">
      <a class="c" href="#">Contact</a>
      <a class="c" href="#">Contact2</a>
    </div>
</div>
<div class="main">
    <div class="c-wrapper2">
      <span class="c">Contact</span>
      <span class="c">Contact2</span>
    </div>
</div>

Solution 9 - Html

If you need one item to be left aligned (like a header) but then multiple items right aligned (like 3 images), then you would do something like this:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

Here's what that will look like (only relavent CSS was included in snippet above)

enter image description here

Solution 10 - Html

'justify-content: flex-end' worked within price box container.

.price-box {
    justify-content: flex-end;
}

Solution 11 - Html

For those using Angular and Flex-Layout, use the following on the flex-item container:

<div fxLayout="row" fxLayoutAlign="flex-end">

See fxLayoutAlign docs here and the full fxLayout docs here.

Solution 12 - Html

I find that adding 'justify-content: flex-end' to the flex container solves the problem while 'justify-content: space-between' doesnt do anything.

Solution 13 - Html

Example code based on answer by TetraDev

Images on right: 

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}


<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

Images on left:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}


<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Flexbox Solutions

Previous Solution:

Remove empty strings from a list of strings

PythonStringList

Next Solution:

Simplest code for array intersection in javascript

JavascriptData StructuresIntersection

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMark BoulderView Question on Stackoverflow
Solution 1 - HtmlAdriftView Answer on Stackoverflow
Solution 2 - HtmlKevin SuttleView Answer on Stackoverflow
Solution 3 - HtmlArno van LieshoutView Answer on Stackoverflow
Solution 4 - HtmlNick FView Answer on Stackoverflow
Solution 5 - HtmlMelchiaView Answer on Stackoverflow
Solution 6 - HtmlCESCOView Answer on Stackoverflow
Solution 7 - HtmlandreisrobView Answer on Stackoverflow
Solution 8 - HtmlMonir KhanView Answer on Stackoverflow
Solution 9 - HtmlTetraDevView Answer on Stackoverflow
Solution 10 - HtmlMohammad AdeelView Answer on Stackoverflow
Solution 11 - HtmlLindausonView Answer on Stackoverflow
Solution 12 - HtmlnightsView Answer on Stackoverflow
Solution 13 - Html1.21 gigawattsView Answer on Stackoverflow