How to position flex items without spaces between them

Question

I currently have 3 items. I would like the 1st item left-aligned and the last 2 right-aligned next to each other. I can't seem to be able to make the middle box go to the right. The justify self attributes were a bit confusing and so I posted my question here. Here is my code.

.box {
  display: flex;
}

.box1 {
  width: 200px;
  height: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
  margin-left: auto;
}

.box3 {
  width: 100px;
  height: 100px;
  margin-left: auto;
}

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

Michael Benjamin · Answer 1 · 2020-06-25T17:32:55.423

You don't need an auto margin on the last item.

.box {
  display: flex;
}

.box2 {
  margin-left: auto;
}

.box3 {
  /* margin-left: auto; */
}

.box > div {
  flex: 0 0 100px;
  height: 100px;
  border: 1px solid black;
}

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

Auto margins consume all available space in the specified direction.

When you apply margin-left: auto to two items, they divide the free space equally between them. As a result, there are gaps.

Just apply the margin to the second item, so it consumes all free space, pinning both itself and its sibling to the right.

More info here: Methods for Aligning Flex Items along the Main Axis

score 0 · Accepted Answer · answered Jun 25 '20 at 17:27

.box {
  display: flex;
}

.box1 {
  width: 200px;
  height: 100px;
  background-color:red;

}
.box2 {
  width: 100px;
  height: 100px;
margin-left:auto;
background-color:blue;
}
.box3 {
  width: 100px;
  height: 100px;
margin-right: 0;
background-color:yellow;
}

<div class="box">
  <div class ="box1">box1</div>
<div class ="box2">box2</div>
<div class ="box3">box3</div>
</div>

How to position flex items without spaces between them

2 Answers2