How to Right-align flex item?












492















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/










share|improve this question




















  • 2





    you can use float right, but it's the same way...! The best way is to use a display table with text-align.

    – Yohann Tilotti
    Mar 15 '14 at 20:08











  • Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1

    – Mark Boulder
    Mar 15 '14 at 20:27






  • 1





    I updated your fiddle jsfiddle.net/vqDK9/2

    – Yohann Tilotti
    Mar 15 '14 at 20:33











  • Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276

    – Michael_B
    Jan 8 '16 at 12:08


















492















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/










share|improve this question




















  • 2





    you can use float right, but it's the same way...! The best way is to use a display table with text-align.

    – Yohann Tilotti
    Mar 15 '14 at 20:08











  • Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1

    – Mark Boulder
    Mar 15 '14 at 20:27






  • 1





    I updated your fiddle jsfiddle.net/vqDK9/2

    – Yohann Tilotti
    Mar 15 '14 at 20:33











  • Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276

    – Michael_B
    Jan 8 '16 at 12:08
















492












492








492


83






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/










share|improve this question
















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/






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





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






html css html5 css3 flexbox






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 6 '18 at 21:52









Melchia

7,54592963




7,54592963










asked Mar 15 '14 at 19:56









Mark BoulderMark Boulder

4,17673461




4,17673461








  • 2





    you can use float right, but it's the same way...! The best way is to use a display table with text-align.

    – Yohann Tilotti
    Mar 15 '14 at 20:08











  • Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1

    – Mark Boulder
    Mar 15 '14 at 20:27






  • 1





    I updated your fiddle jsfiddle.net/vqDK9/2

    – Yohann Tilotti
    Mar 15 '14 at 20:33











  • Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276

    – Michael_B
    Jan 8 '16 at 12:08
















  • 2





    you can use float right, but it's the same way...! The best way is to use a display table with text-align.

    – Yohann Tilotti
    Mar 15 '14 at 20:08











  • Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1

    – Mark Boulder
    Mar 15 '14 at 20:27






  • 1





    I updated your fiddle jsfiddle.net/vqDK9/2

    – Yohann Tilotti
    Mar 15 '14 at 20:33











  • Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276

    – Michael_B
    Jan 8 '16 at 12:08










2




2





you can use float right, but it's the same way...! The best way is to use a display table with text-align.

– Yohann Tilotti
Mar 15 '14 at 20:08





you can use float right, but it's the same way...! The best way is to use a display table with text-align.

– Yohann Tilotti
Mar 15 '14 at 20:08













Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1

– Mark Boulder
Mar 15 '14 at 20:27





Sure, if that's better. Still having trouble right-aligning "Contact" though: jsfiddle.net/vqDK9/1

– Mark Boulder
Mar 15 '14 at 20:27




1




1





I updated your fiddle jsfiddle.net/vqDK9/2

– Yohann Tilotti
Mar 15 '14 at 20:33





I updated your fiddle jsfiddle.net/vqDK9/2

– Yohann Tilotti
Mar 15 '14 at 20:33













Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276

– Michael_B
Jan 8 '16 at 12:08







Here are at least two ways to do it: stackoverflow.com/a/33856609/3597276

– Michael_B
Jan 8 '16 at 12:08














10 Answers
10






active

oldest

votes


















314














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>








share|improve this answer



















  • 175





    Or justify-content: flex-end

    – B T
    Mar 17 '17 at 0:21






  • 1





    Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.

    – Agamemnus
    May 11 '17 at 0:03






  • 11





    Note that this doesn't always work the way you may expect, like when there's a .c::after pseudo-element. In my experience, margin-left: auto; is the way to go.

    – Will
    Nov 5 '17 at 4:06






  • 5





    Or flex-flow: row-reverse;

    – jchook
    Feb 9 '18 at 1:21






  • 1





    I don't see this being a correct answer if you wan't to align just one item in a flex container.

    – Foxhoundn
    Jan 22 at 0:01



















917














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>








share|improve this answer





















  • 4





    @MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.

    – Adrift
    Mar 16 '14 at 11:46






  • 4





    @MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex, order, etc).

    – Adrift
    Mar 16 '14 at 14:38






  • 4





    This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)

    – SidOfc
    Jan 29 '16 at 15:22






  • 21





    Flex is the best thing to happen to web development since the blink tag.

    – Jonny Cook
    May 23 '16 at 20:16






  • 4





    This fix should be the accepted answer!

    – Automagisch
    Mar 21 '17 at 11:06



















30














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.






share|improve this answer



















  • 2





    space-between was exactly what I was looking for, thanks!

    – Eddie Loeffen
    Dec 30 '15 at 21:03











  • Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd

    – user1063287
    May 3 '18 at 3:42



















26














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>








share|improve this answer





















  • 2





    Finally someone who understands flexbox

    – Kokodoko
    Aug 14 '17 at 12:05






  • 6





    @Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...

    – Zanshin13
    Aug 14 '17 at 13:31











  • @Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)

    – Kokodoko
    Aug 15 '17 at 14:12








  • 2





    @Kokodoko justify-content: space-between is "so much" css, seriously? No need for further comments (but if you want - welcome to chat). This answer has its right to be here, because it is a solution. But definitely not optimal one. Idk, maybe you did't notice but most of css from another answers are OP's and answers actually reduce (a little bit) amount of author's css. This answer does not have less css then others (will not work without OP's css - jsfiddle.net/63ma3b56). But it has one more html element.

    – Zanshin13
    Aug 15 '17 at 15:01






  • 1





    what do you mean by so much css ?

    – yacine benzmane
    Jul 25 '18 at 9:04



















22














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



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





share|improve this answer



















  • 1





    The justify-content attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox

    – Klaas van der Weij
    Nov 8 '18 at 10:36



















15














As easy as



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





share|improve this answer































    6














    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






    share|improve this answer































      4














      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>






      share|improve this answer
























      • For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!

        – Sensei James
        Jan 10 at 19:55





















      2














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






      share|improve this answer































        0














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



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





        share|improve this answer























          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f22429003%2fhow-to-right-align-flex-item%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          10 Answers
          10






          active

          oldest

          votes








          10 Answers
          10






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          314














          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>








          share|improve this answer



















          • 175





            Or justify-content: flex-end

            – B T
            Mar 17 '17 at 0:21






          • 1





            Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.

            – Agamemnus
            May 11 '17 at 0:03






          • 11





            Note that this doesn't always work the way you may expect, like when there's a .c::after pseudo-element. In my experience, margin-left: auto; is the way to go.

            – Will
            Nov 5 '17 at 4:06






          • 5





            Or flex-flow: row-reverse;

            – jchook
            Feb 9 '18 at 1:21






          • 1





            I don't see this being a correct answer if you wan't to align just one item in a flex container.

            – Foxhoundn
            Jan 22 at 0:01
















          314














          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>








          share|improve this answer



















          • 175





            Or justify-content: flex-end

            – B T
            Mar 17 '17 at 0:21






          • 1





            Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.

            – Agamemnus
            May 11 '17 at 0:03






          • 11





            Note that this doesn't always work the way you may expect, like when there's a .c::after pseudo-element. In my experience, margin-left: auto; is the way to go.

            – Will
            Nov 5 '17 at 4:06






          • 5





            Or flex-flow: row-reverse;

            – jchook
            Feb 9 '18 at 1:21






          • 1





            I don't see this being a correct answer if you wan't to align just one item in a flex container.

            – Foxhoundn
            Jan 22 at 0:01














          314












          314








          314







          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>








          share|improve this answer













          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>








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





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






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Sep 15 '16 at 14:47









          Kevin SuttleKevin Suttle

          4,92932333




          4,92932333








          • 175





            Or justify-content: flex-end

            – B T
            Mar 17 '17 at 0:21






          • 1





            Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.

            – Agamemnus
            May 11 '17 at 0:03






          • 11





            Note that this doesn't always work the way you may expect, like when there's a .c::after pseudo-element. In my experience, margin-left: auto; is the way to go.

            – Will
            Nov 5 '17 at 4:06






          • 5





            Or flex-flow: row-reverse;

            – jchook
            Feb 9 '18 at 1:21






          • 1





            I don't see this being a correct answer if you wan't to align just one item in a flex container.

            – Foxhoundn
            Jan 22 at 0:01














          • 175





            Or justify-content: flex-end

            – B T
            Mar 17 '17 at 0:21






          • 1





            Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.

            – Agamemnus
            May 11 '17 at 0:03






          • 11





            Note that this doesn't always work the way you may expect, like when there's a .c::after pseudo-element. In my experience, margin-left: auto; is the way to go.

            – Will
            Nov 5 '17 at 4:06






          • 5





            Or flex-flow: row-reverse;

            – jchook
            Feb 9 '18 at 1:21






          • 1





            I don't see this being a correct answer if you wan't to align just one item in a flex container.

            – Foxhoundn
            Jan 22 at 0:01








          175




          175





          Or justify-content: flex-end

          – B T
          Mar 17 '17 at 0:21





          Or justify-content: flex-end

          – B T
          Mar 17 '17 at 0:21




          1




          1





          Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.

          – Agamemnus
          May 11 '17 at 0:03





          Try setting the width of .c to 300px. The title is no longer centered. So yes, this answers the question, but this breaks the design.

          – Agamemnus
          May 11 '17 at 0:03




          11




          11





          Note that this doesn't always work the way you may expect, like when there's a .c::after pseudo-element. In my experience, margin-left: auto; is the way to go.

          – Will
          Nov 5 '17 at 4:06





          Note that this doesn't always work the way you may expect, like when there's a .c::after pseudo-element. In my experience, margin-left: auto; is the way to go.

          – Will
          Nov 5 '17 at 4:06




          5




          5





          Or flex-flow: row-reverse;

          – jchook
          Feb 9 '18 at 1:21





          Or flex-flow: row-reverse;

          – jchook
          Feb 9 '18 at 1:21




          1




          1





          I don't see this being a correct answer if you wan't to align just one item in a flex container.

          – Foxhoundn
          Jan 22 at 0:01





          I don't see this being a correct answer if you wan't to align just one item in a flex container.

          – Foxhoundn
          Jan 22 at 0:01













          917














          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>








          share|improve this answer





















          • 4





            @MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.

            – Adrift
            Mar 16 '14 at 11:46






          • 4





            @MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex, order, etc).

            – Adrift
            Mar 16 '14 at 14:38






          • 4





            This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)

            – SidOfc
            Jan 29 '16 at 15:22






          • 21





            Flex is the best thing to happen to web development since the blink tag.

            – Jonny Cook
            May 23 '16 at 20:16






          • 4





            This fix should be the accepted answer!

            – Automagisch
            Mar 21 '17 at 11:06
















          917














          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>








          share|improve this answer





















          • 4





            @MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.

            – Adrift
            Mar 16 '14 at 11:46






          • 4





            @MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex, order, etc).

            – Adrift
            Mar 16 '14 at 14:38






          • 4





            This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)

            – SidOfc
            Jan 29 '16 at 15:22






          • 21





            Flex is the best thing to happen to web development since the blink tag.

            – Jonny Cook
            May 23 '16 at 20:16






          • 4





            This fix should be the accepted answer!

            – Automagisch
            Mar 21 '17 at 11:06














          917












          917








          917







          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>








          share|improve this answer















          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>








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





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






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited May 18 '18 at 12:12









          Nitin Bisht

          1,2601519




          1,2601519










          answered Mar 15 '14 at 21:17









          AdriftAdrift

          42.3k97281




          42.3k97281








          • 4





            @MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.

            – Adrift
            Mar 16 '14 at 11:46






          • 4





            @MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex, order, etc).

            – Adrift
            Mar 16 '14 at 14:38






          • 4





            This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)

            – SidOfc
            Jan 29 '16 at 15:22






          • 21





            Flex is the best thing to happen to web development since the blink tag.

            – Jonny Cook
            May 23 '16 at 20:16






          • 4





            This fix should be the accepted answer!

            – Automagisch
            Mar 21 '17 at 11:06














          • 4





            @MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.

            – Adrift
            Mar 16 '14 at 11:46






          • 4





            @MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex, order, etc).

            – Adrift
            Mar 16 '14 at 14:38






          • 4





            This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)

            – SidOfc
            Jan 29 '16 at 15:22






          • 21





            Flex is the best thing to happen to web development since the blink tag.

            – Jonny Cook
            May 23 '16 at 20:16






          • 4





            This fix should be the accepted answer!

            – Automagisch
            Mar 21 '17 at 11:06








          4




          4





          @MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.

          – Adrift
          Mar 16 '14 at 11:46





          @MarkBoulder: For compatibility reasons his method is better, but if you're already using flexbox my answer would make more sense.

          – Adrift
          Mar 16 '14 at 11:46




          4




          4





          @MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex, order, etc).

          – Adrift
          Mar 16 '14 at 14:38





          @MarkBoulder: They both accomplish the same thing in this case. The advantage would be having other properties (and behaviour) associated with flex items that the table approach doesn't have (flex, order, etc).

          – Adrift
          Mar 16 '14 at 14:38




          4




          4





          This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)

          – SidOfc
          Jan 29 '16 at 15:22





          This example is so simple yet so effective, I needed exactly this for something I wanted to try, played around with it and the predictable happened, my eyes thank you for opening them :)

          – SidOfc
          Jan 29 '16 at 15:22




          21




          21





          Flex is the best thing to happen to web development since the blink tag.

          – Jonny Cook
          May 23 '16 at 20:16





          Flex is the best thing to happen to web development since the blink tag.

          – Jonny Cook
          May 23 '16 at 20:16




          4




          4





          This fix should be the accepted answer!

          – Automagisch
          Mar 21 '17 at 11:06





          This fix should be the accepted answer!

          – Automagisch
          Mar 21 '17 at 11:06











          30














          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.






          share|improve this answer



















          • 2





            space-between was exactly what I was looking for, thanks!

            – Eddie Loeffen
            Dec 30 '15 at 21:03











          • Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd

            – user1063287
            May 3 '18 at 3:42
















          30














          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.






          share|improve this answer



















          • 2





            space-between was exactly what I was looking for, thanks!

            – Eddie Loeffen
            Dec 30 '15 at 21:03











          • Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd

            – user1063287
            May 3 '18 at 3:42














          30












          30








          30







          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.






          share|improve this answer













          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Sep 1 '15 at 13:51









          Nick FNick F

          6,26145170




          6,26145170








          • 2





            space-between was exactly what I was looking for, thanks!

            – Eddie Loeffen
            Dec 30 '15 at 21:03











          • Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd

            – user1063287
            May 3 '18 at 3:42














          • 2





            space-between was exactly what I was looking for, thanks!

            – Eddie Loeffen
            Dec 30 '15 at 21:03











          • Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd

            – user1063287
            May 3 '18 at 3:42








          2




          2





          space-between was exactly what I was looking for, thanks!

          – Eddie Loeffen
          Dec 30 '15 at 21:03





          space-between was exactly what I was looking for, thanks!

          – Eddie Loeffen
          Dec 30 '15 at 21:03













          Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd

          – user1063287
          May 3 '18 at 3:42





          Borders disappear when using second suggestion, expected behaviour? codepen.io/oshihirii/pen/RygKRd

          – user1063287
          May 3 '18 at 3:42











          26














          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>








          share|improve this answer





















          • 2





            Finally someone who understands flexbox

            – Kokodoko
            Aug 14 '17 at 12:05






          • 6





            @Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...

            – Zanshin13
            Aug 14 '17 at 13:31











          • @Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)

            – Kokodoko
            Aug 15 '17 at 14:12








          • 2





            @Kokodoko justify-content: space-between is "so much" css, seriously? No need for further comments (but if you want - welcome to chat). This answer has its right to be here, because it is a solution. But definitely not optimal one. Idk, maybe you did't notice but most of css from another answers are OP's and answers actually reduce (a little bit) amount of author's css. This answer does not have less css then others (will not work without OP's css - jsfiddle.net/63ma3b56). But it has one more html element.

            – Zanshin13
            Aug 15 '17 at 15:01






          • 1





            what do you mean by so much css ?

            – yacine benzmane
            Jul 25 '18 at 9:04
















          26














          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>








          share|improve this answer





















          • 2





            Finally someone who understands flexbox

            – Kokodoko
            Aug 14 '17 at 12:05






          • 6





            @Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...

            – Zanshin13
            Aug 14 '17 at 13:31











          • @Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)

            – Kokodoko
            Aug 15 '17 at 14:12








          • 2





            @Kokodoko justify-content: space-between is "so much" css, seriously? No need for further comments (but if you want - welcome to chat). This answer has its right to be here, because it is a solution. But definitely not optimal one. Idk, maybe you did't notice but most of css from another answers are OP's and answers actually reduce (a little bit) amount of author's css. This answer does not have less css then others (will not work without OP's css - jsfiddle.net/63ma3b56). But it has one more html element.

            – Zanshin13
            Aug 15 '17 at 15:01






          • 1





            what do you mean by so much css ?

            – yacine benzmane
            Jul 25 '18 at 9:04














          26












          26








          26







          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>








          share|improve this answer















          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>








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





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






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Oct 3 '17 at 11:33

























          answered Dec 12 '16 at 19:28









          ArnoArno

          1,0001919




          1,0001919








          • 2





            Finally someone who understands flexbox

            – Kokodoko
            Aug 14 '17 at 12:05






          • 6





            @Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...

            – Zanshin13
            Aug 14 '17 at 13:31











          • @Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)

            – Kokodoko
            Aug 15 '17 at 14:12








          • 2





            @Kokodoko justify-content: space-between is "so much" css, seriously? No need for further comments (but if you want - welcome to chat). This answer has its right to be here, because it is a solution. But definitely not optimal one. Idk, maybe you did't notice but most of css from another answers are OP's and answers actually reduce (a little bit) amount of author's css. This answer does not have less css then others (will not work without OP's css - jsfiddle.net/63ma3b56). But it has one more html element.

            – Zanshin13
            Aug 15 '17 at 15:01






          • 1





            what do you mean by so much css ?

            – yacine benzmane
            Jul 25 '18 at 9:04














          • 2





            Finally someone who understands flexbox

            – Kokodoko
            Aug 14 '17 at 12:05






          • 6





            @Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...

            – Zanshin13
            Aug 14 '17 at 13:31











          • @Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)

            – Kokodoko
            Aug 15 '17 at 14:12








          • 2





            @Kokodoko justify-content: space-between is "so much" css, seriously? No need for further comments (but if you want - welcome to chat). This answer has its right to be here, because it is a solution. But definitely not optimal one. Idk, maybe you did't notice but most of css from another answers are OP's and answers actually reduce (a little bit) amount of author's css. This answer does not have less css then others (will not work without OP's css - jsfiddle.net/63ma3b56). But it has one more html element.

            – Zanshin13
            Aug 15 '17 at 15:01






          • 1





            what do you mean by so much css ?

            – yacine benzmane
            Jul 25 '18 at 9:04








          2




          2





          Finally someone who understands flexbox

          – Kokodoko
          Aug 14 '17 at 12:05





          Finally someone who understands flexbox

          – Kokodoko
          Aug 14 '17 at 12:05




          6




          6





          @Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...

          – Zanshin13
          Aug 14 '17 at 13:31





          @Kokodoko yeah, using one more non-semantic html element to move another element is the top of understanding flexbox...

          – Zanshin13
          Aug 14 '17 at 13:31













          @Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)

          – Kokodoko
          Aug 15 '17 at 14:12







          @Zanshin13 The other answers all write so much extra css that you might as well leave out the flex container and code the whole thing yourself :)

          – Kokodoko
          Aug 15 '17 at 14:12






          2




          2





          @Kokodoko justify-content: space-between is "so much" css, seriously? No need for further comments (but if you want - welcome to chat). This answer has its right to be here, because it is a solution. But definitely not optimal one. Idk, maybe you did't notice but most of css from another answers are OP's and answers actually reduce (a little bit) amount of author's css. This answer does not have less css then others (will not work without OP's css - jsfiddle.net/63ma3b56). But it has one more html element.

          – Zanshin13
          Aug 15 '17 at 15:01





          @Kokodoko justify-content: space-between is "so much" css, seriously? No need for further comments (but if you want - welcome to chat). This answer has its right to be here, because it is a solution. But definitely not optimal one. Idk, maybe you did't notice but most of css from another answers are OP's and answers actually reduce (a little bit) amount of author's css. This answer does not have less css then others (will not work without OP's css - jsfiddle.net/63ma3b56). But it has one more html element.

          – Zanshin13
          Aug 15 '17 at 15:01




          1




          1





          what do you mean by so much css ?

          – yacine benzmane
          Jul 25 '18 at 9:04





          what do you mean by so much css ?

          – yacine benzmane
          Jul 25 '18 at 9:04











          22














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



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





          share|improve this answer



















          • 1





            The justify-content attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox

            – Klaas van der Weij
            Nov 8 '18 at 10:36
















          22














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



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





          share|improve this answer



















          • 1





            The justify-content attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox

            – Klaas van der Weij
            Nov 8 '18 at 10:36














          22












          22








          22







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



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





          share|improve this answer













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



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






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Mar 6 '18 at 11:04









          MelchiaMelchia

          7,54592963




          7,54592963








          • 1





            The justify-content attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox

            – Klaas van der Weij
            Nov 8 '18 at 10:36














          • 1





            The justify-content attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox

            – Klaas van der Weij
            Nov 8 '18 at 10:36








          1




          1





          The justify-content attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox

          – Klaas van der Weij
          Nov 8 '18 at 10:36





          The justify-content attribute is an attribute of the flex-container, see Chris Coyer's flexy cheatsheet: css-tricks.com/snippets/css/a-guide-to-flexbox

          – Klaas van der Weij
          Nov 8 '18 at 10:36











          15














          As easy as



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





          share|improve this answer




























            15














            As easy as



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





            share|improve this answer


























              15












              15








              15







              As easy as



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





              share|improve this answer













              As easy as



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






              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Nov 16 '17 at 21:48









              CESCOCESCO

              3,48032946




              3,48032946























                  6














                  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






                  share|improve this answer




























                    6














                    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






                    share|improve this answer


























                      6












                      6








                      6







                      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






                      share|improve this answer













                      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







                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Sep 28 '17 at 16:31









                      TetraDevTetraDev

                      7,39723243




                      7,39723243























                          4














                          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>






                          share|improve this answer
























                          • For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!

                            – Sensei James
                            Jan 10 at 19:55


















                          4














                          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>






                          share|improve this answer
























                          • For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!

                            – Sensei James
                            Jan 10 at 19:55
















                          4












                          4








                          4







                          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>






                          share|improve this answer













                          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>







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Nov 15 '18 at 18:43









                          andreisrobandreisrob

                          43638




                          43638













                          • For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!

                            – Sensei James
                            Jan 10 at 19:55





















                          • For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!

                            – Sensei James
                            Jan 10 at 19:55



















                          For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!

                          – Sensei James
                          Jan 10 at 19:55







                          For those who don't merely want to right align a single element, but may want to left align one element, and right align another (within the same flex layout) this is the way to go!

                          – Sensei James
                          Jan 10 at 19:55













                          2














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






                          share|improve this answer




























                            2














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






                            share|improve this answer


























                              2












                              2








                              2







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






                              share|improve this answer













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







                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Dec 27 '18 at 2:25









                              nightsnights

                              30528




                              30528























                                  0














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



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





                                  share|improve this answer




























                                    0














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



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





                                    share|improve this answer


























                                      0












                                      0








                                      0







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



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





                                      share|improve this answer













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



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






                                      share|improve this answer












                                      share|improve this answer



                                      share|improve this answer










                                      answered 12 hours ago









                                      Mohammad AdeelMohammad Adeel

                                      12




                                      12






























                                          draft saved

                                          draft discarded




















































                                          Thanks for contributing an answer to Stack Overflow!


                                          • Please be sure to answer the question. Provide details and share your research!

                                          But avoid



                                          • Asking for help, clarification, or responding to other answers.

                                          • Making statements based on opinion; back them up with references or personal experience.


                                          To learn more, see our tips on writing great answers.




                                          draft saved


                                          draft discarded














                                          StackExchange.ready(
                                          function () {
                                          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f22429003%2fhow-to-right-align-flex-item%23new-answer', 'question_page');
                                          }
                                          );

                                          Post as a guest















                                          Required, but never shown





















































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown

































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown







                                          Popular posts from this blog

                                          Bressuire

                                          Vorschmack

                                          Quarantine