flexbox: space-between of 2 children starting at the middle and then ending

Question

I’ve recently been contacting flexbox, discovered the property Justify-content: space-between; but I was wondering if it’s possible:

<div class="pai">
  <div class="filho1"></div>
  <div class="filho2"></div>
</div>

.pai{      
  display: flex;
  justify-content: space-between;
}

So . Fil1 is in the left corner and . Fil2 in the right. If I put a third . filho3, the . Fil2 would go to the middle and Fil3 to the right corner. Is it possible to force Fil1 to the middle and 2 to the right corner? only with 2 elements. I would not like to put a marking in vain in the code. Thank you to anyone who can help!

Answer 1

I advise you to simply put one margin-left and translateX() in the filho1 So it’s lined up in the middle of the page!

See how it looks in this example

.pai{      
  display: flex;
  justify-content: space-between;
}
.filho1 {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin-left: 50%;
  transform: translateX(-50%);
}
.filho2 {
  width: 100px;
  height: 100px;
  background-color: #0f0;
}

<div class="pai">
  <div class="filho1"></div>
  <div class="filho2"></div>
</div>

To align the filho1 in the space left in the father discounting the width of the filho2 is just one margin: auto (so it aligns in the empty space that the filho2 leave inside the pai)

.pai{      
  display: flex;
  justify-content: space-between;
}
.filho1 {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 0 auto;
}
.filho2 {
  width: 100px;
  height: 100px;
  background-color: #0f0;
}

<div class="pai">
  <div class="filho1"></div>
  <div class="filho2"></div>
</div>

---

EDIT

Man I was kind of intrigued because at first I wanted to use the property justify-self, but it didn’t work! Then I went to research and found this excellent answer that can open your head to some things from FlexBox

https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties

Apparently justify-self does not apply on that occasion and alignment on Main-Axis (x-axis) shall be done using margins even!

See some examples of aligning with the margins in a .container with display:flex

---

OBS: If you reverse the axis by changing the flex-direction default of row for column Then you can use the align-self to align as you wish, but it is as if each item is in a row (line) different.

But if you wish you can correct this by putting position: absolute; in the children. In this example I did not do this because it is only for didactic purposes of example.

Take the example:

.pai{      
  display: flex;
  flex-direction: column;
}
.filho1 {
  width: 100px;
  height: 100px;
  background-color: #f00;
  align-self: center;
  /* position: absolute; se quiser deixa-los na mesma linha de forma mais fácil */
}
.filho2 {
  width: 100px;
  height: 100px;
  background-color: #0f0;
  align-self: flex-end;
  /* position: absolute; se quiser deixa-los na mesma linha de forma mais fácil */
}

<div class="pai"> pai com: display:flex e  flex-direction:column
  <div class="filho1">align-self: center;</div>
  <div class="filho2"> align-self: flex-end;</div>
</div>

Answer 2

Maybe not the best ways, but I see two possibilities that can help you. One of them is using justify-content: flex-end, this will cause your items to start to be aligned from the right. It may not be exactly what you are looking for, but it can help you.

Another solution would be to turn your 'son' Ivs into 'grandchildren' of the div 'Filho2', and then apply to it the same flexbox properties that you used in the parent div.

Whenever I need to consult something related to flexbox I end up using this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/