How can I put a flex item to the end?

Question

I want the flex items in the center and only the last item at the end, but when I use margin-left: auto, the other items are put in the beginning.

#container {
  background-color: wheat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  background-color: thistle;
  margin: 5px;
  padding: 10px;
}

.item:last-child {
  margin-left: auto;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>  
</div>

score 5 · Accepted Answer · answered Mar 31 '21 at 04:50

You were correct in using margin-left: auto on the last flex item. That is one way to position the last item at the end of the main axis. To keep the other flex items positioned in the center, you can simply give the first flex item .item:first-child an auto left margin with margin-left: auto. Now the items 1,2,3,4 are centered in the nav bar with number 5 (the last item) positioned at the end of the row.

#container {
  background-color: wheat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  background-color: thistle;
  margin: 5px;
  padding: 10px;
}

.item:first-child {
  margin-left: auto;
}

.item:last-child {
  margin-left: auto;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>  
</div>

1

Yours is an elegant solution. – HKS Mar 31 '21 at 05:04

score 1 · Answer 2 · edited Mar 31 '21 at 05:04

If you want the following result

the, the following solution would work.

.container {
  background-color: wheat;
  width: 10rem;
  height: 5rem;
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.item {
  width: 2rem;
  height: 2rem;
  background-color: thistle;
  border: 0.1rem solid gray;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item:nth-child(5) {
  position: absolute;
  top: 50%;
  left: 95%;
  transform: translateY(-50%);
}

In the code above, I have used absolute positioning for the 5th item, so that it is taken out of the normal flow of the document and we can position it using top, left, right and bottom properties. Make sure to add position:relative to the parent container.

I have centered the 5th item on the center of the container using transform:translateY(-50%). You can decide how far you want to position the 5th element from the left by changing the left property.

And the reason margin-left:auto does not work, because when you use it, the 5th item takes as much space as possible towards its left and therefore the rest of the 4 items get pushed to the left/beginning of the container.

score 0 · Answer 3 · answered Mar 31 '21 at 04:49

I hope I can help you!

how about doing like this?

#container {
  background-color: wheat;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.item {
  background-color: thistle;
  margin: 5px;
  padding: 10px;
}

.item:last-child {
  position: absolute;
  right: 0px;
}

I used position absolute for the element you want to put at the end. And I added position relative attribute to the parent container so that the last element is still within the parent container.

Deeksha Gupta · Answer 4 · 2021-03-31T05:05:56.580

0

It can be achieved by Flex Auto Margin.

#container {
  background-color: wheat;
  display: flex;
}

.item {
  background-color: thistle;
  margin: 5px;
  padding: 10px;
}

.item:first-child{
  margin-left: auto;
   
   }

.item:last-child {
  margin-left: auto;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>  
</div>

edited Mar 31 '21 at 05:05

answered Mar 31 '21 at 04:51

Deeksha Gupta

317
2
8

2

Instead of using a hidden element, you could simply add `margin-left:auto` to the first child and achieve the same result. – need_to_know_now Mar 31 '21 at 04:58
Thanks for this it seems to work. I will update the code – Deeksha Gupta Mar 31 '21 at 05:04

score 0 · Answer 5 · edited Mar 31 '21 at 05:06

You can simply add margin-left:auto to the first element, thereby keeping it "fixed" in a sense if you may. You can make a new class for it or simply use first-child for it.

#container {
  background-color: wheat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  background-color: thistle;
  margin: 5px;
  padding: 10px;
}

.item:first-child{
  margin-left:auto;
}

.item:last-child {
  margin-left: auto;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>  
</div>

How can I put a flex item to the end?

5 Answers5