alignment of single element inside div with display: flex;

Question

Here is my html and css below

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .my-btn {
        width: 150px;
        height: 50px;
        background-color: #3f729b;
        line-height: 50px;
        text-align: center;
        color: #FFFFFF;
        cursor: pointer;
        display: inline-block;
    }

    <div class="flex">
        <span class="my-btn btn-back">back</span>

        <span class="my-btn btn-download">download</span>

        <span class="my-btn btn-next">next</span>
    </div>

if all the .my-btn are visible, everything is looking fine, but if I want to have only .btn-next visible it is left aligned. How can I have it right aligned. I've tried to use

.btn-next {
    align-self: flex-end;
}

but it's not working.

And ideas?

http://jsfiddle.net/ahzc1f41/1/

I don't want to do that trick with opacity. I've just added jsfiddle link to my question. — Hayk Aghabekyan, Dec 15 '15 at 13:11
You can do this with flexbox `auto` margins. See here: [Methods for Aligning Flex Items](http://stackoverflow.com/a/33856609/3597276) — Michael Benjamin, Dec 15 '15 at 15:55

Kees Sonnema · Answer 1 · 2016-04-05T08:25:31.497

Add margin-left: auto; to your .btn-back. That's how it's meant to be done

EDIT: Add margin-right: auto; to btn-back and margin: 0 auto; to btn-download because when the one of the other buttons are shown, it fails without.

JSFIDDLE

HTML

<div class="flex">
    <span class="my-btn btn-back">back</span>

    <span class="my-btn btn-download">download</span>

    <span class="my-btn btn-next">next</span>
</div>

CSS

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}

.my-btn {
  width: 150px;
  height: 50px;
  background-color: #3f729b;
  line-height: 50px;
  text-align: center;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
}

.btn-next {
  align-self: flex-end;
  margin-left: auto;
}

.btn-download{
  margin: 0 auto;
}

.btn-back{
  margin-right: auto;
}

.btn-download, .btn-back {
  //display: none;      
}

SOURCE: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Yep...you might want to update the fiddle - http://jsfiddle.net/Paulie_D/2x36vuch/1/ — Paulie_D, Dec 15 '15 at 13:24

score 1 · Answer 2 · answered Dec 15 '15 at 13:15

You can use margin-left: auto; on .btn-next and margin-right: auto; on .btn-back

DEMO

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}

.my-btn {
  width: 150px;
  height: 50px;
  background-color: #3f729b;
  line-height: 50px;
  text-align: center;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
}

.btn-next {
  margin-left: auto;
}

.btn-back {
  margin-right: auto;
}

.btn-download, .btn-back {
  display: none;      
}

    <div class="flex">
        <span class="my-btn btn-back">back</span>

        <span class="my-btn btn-download">download</span>

        <span class="my-btn btn-next">next</span>
    </div>

alignment of single element inside div with display: flex;

2 Answers2