First item on center and second item at last in flex

Question

Pretty common question I guess, but couldn't find any solution to fix it.

Code is:

<div class="container">
  <div class="first-item">A</div>
  <div class="second-item">B</div>
</div>

Should look like this:

first-item will be at middle and second-item should be at last.

What I've tried:

.container {
  display: flex;
  justify-content: center;
}

.container .second-item {
  align-self: flex-end;
}

How could I achieve it using flex or in any other way of css?

score 4 · Answer 1 · answered Oct 31 '18 at 09:52

4

Almost: you just need to add a margin auto on the first element

.container {
  display: flex;
  justify-content: center;
}

.first-item {
  margin: auto;
}
.second-item {
  align-self: flex-end;
}

Codepen demo

answered Oct 31 '18 at 09:52

Fabrizio Calderan

In your Codepen, change "B" into "Lorem Ipsum" and you'll see "A" is not in the center. – Gerard Oct 31 '18 at 10:07
A is centered with respect of the space available. If the second element is larger this space decreases. And, as per the OP image, the X is centered on the available space (not the full width). A solution with position absolute is fine if you know what you're doing because it could cause overlapping elements easier (B is removed form the flow) – Fabrizio Calderan Oct 31 '18 at 10:09
I doubt that's OP's requirement. But if it is, I'm sure OP will accept your solution because it's the cleanest one. – Gerard Oct 31 '18 at 10:12
What is the `align-self: flex-end;` on the second item for? The `margin: auto` already seems to do the trick. Is this for (other) browser support? (I'm using Chrome) – WoodrowShigeru Apr 18 '23 at 10:12

score 2 · Accepted Answer · answered Oct 31 '18 at 09:51

2

You can try that,

.container {
  display: flex;
  justify-content: center;
}

.container .second-item {
  right: 0;
  position: absolute;
}

<div class="container">
  <div class="first-item">A</div>
  <div class="second-item">B</div>
</div>

answered Oct 31 '18 at 09:51

codesayan

2 Answers2