Align all item to left except last in a flexbox container [duplicate]

Question

Following is my code in which I am trying to align the last div (class="four") to the right and I am using align-self: flex-end; but still its not going to the right. Let me know what I am doing wrong here.

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal;
  display: inline-block;
  align-self: flex-end;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

Abhishek Pandey · Accepted Answer · 2019-11-12 05:40:13Z

10

margin-left:auto; will do the job.

One use of auto margins in the main axis is to separate flex items into distinct "groups"...

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal;
  display: inline-block;
  margin-left:auto;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

edited Nov 12, 2019 at 5:40

answered Nov 12, 2019 at 5:32

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nesh Over a year ago

Thanks for the help, but any specific reason why we need to add margin-left:auto; in this case ? Let me know if I am missing something here conceptually.

Abhishek Pandey Over a year ago

I have mentioned the link, you can read there more about it.

Samuel Goldenbaum · Accepted Answer · 2019-11-12 05:32:11Z

3

use margin-left: auto

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal;
  display: inline-block;
margin-left: auto;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

answered Nov 12, 2019 at 5:32

Samuel Goldenbaum

19k20 gold badges74 silver badges112 bronze badges

1 Comment

Nesh Over a year ago

Thanks for the help, but any specific reason why we need to add margin-left:auto; in this case ? Let me know if I am missing something here conceptually.

Yudiz Solutions · Accepted Answer · 2019-11-12 05:45:24Z

1

Align self property is used to adjust the flex items on the cross axis.

Please try this code.

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal;
  margin-left: auto;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

answered Nov 12, 2019 at 5:45

Yudiz Solutions

4,4972 gold badges11 silver badges21 bronze badges

Comments

akhtarvahid · Accepted Answer · 2019-11-12 05:50:59Z

-1

Another way to do.

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
  position: relative;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal; 
  right: 0;
  position: absolute;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

answered Nov 12, 2019 at 5:50

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

Align all item to left except last in a flexbox container [duplicate]

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Linked

Related