Flexbox: How to make an element stick to the right end of its container?

Question

My intention was to have one big square and inside it two small squares.

One square (small-left) is supposed to stick to the left end of the big square, and the other(small-right) is supposed to stick to the right end.

This is what I get:

Do you know what can make the right-small square stick to the right?

Please look at the code I wrote:

.big {
  display: flex;
  width: 40vw;
  height: 10vw;
  border: solid;
  flex-direction: row;
}

.small-right,
.small-left {
  width: 5vw;
  height: 5vw;
  border: solid;
}

.small-right {
  align-items: flex-end;
}

<div class="big">
  <div class="small-left"></div>
  <div class="small-right"></div>
</div>

You can also see the code in Code-Pen: https://codepen.io/CrazySynthax/pen/OmMxQw

score 11 · Accepted Answer · edited May 23 '17 at 12:09

11

You have many options. Here are three:

add justify-content: space-between to the flex container, OR
add margin-right: auto to the first flex item, OR
add margin-left: auto to the second flex item.

Here's an explanation of how each property works:

Methods for Aligning Flex Items along the Main Axis

edited May 23 '17 at 12:09

Community

1
1

answered Apr 19 '17 at 16:11

Michael Benjamin

346,931
104
581
701

score 5 · Answer 2 · answered Apr 19 '17 at 16:13

5

You can use margin:

.big {
  display: flex;
  width: 40vw;
  height: 10vw;
  border: solid;
  flex-direction: row;
}

.small-right,
.small-left {
  width: 5vw;
  height: 5vw;
  border: solid;
}

.small-right {
  margin-top: auto;
  margin-left: auto;
}

<div class="big">
  <div class="small-left"></div>
  <div class="small-right"></div>
</div>

https://codepen.io/gc-nomade/pen/zwrEXo

answered Apr 19 '17 at 16:13

G-Cyrillus

101,410
14
105
129

I was trying to make a responsive form with the s sliding below the label but staying flush to the right. I came up with the following solution (based on this answer by @G-Cyr): https://codepen.io/JuanLanus/pen/NWWmmgm – Juan Lanus Nov 23 '19 at 16:29

R. Saranya · Answer 3 · 2017-04-20T08:38:12.443

Try this

Add justify-content: space-between to the main div.Remove-- margin-top: auto; from small-right class.

 <div class="big">
         <div class="small-left"></div>
         <div class="small-right"></div>
     </div>



   .big {
      display: flex;
      width: 40vw;
      height: 10vw;
      border: solid;
      justify-content: space-between;
    }

    .small-right,
    .small-left {
      width: 5vw;
      height: 5vw;
      border: solid;
    }

Flexbox: How to make an element stick to the right end of its container?

3 Answers3