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

Question

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

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

Recently I was contacting flexbox, I discovered the justify-content: space-between property; but I wanted to know if it's possible:

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

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

In this way, filename1 is in the left corner and filename2 in the right. If I put a third child, the child2 would go to the middle and the child3 to the right corner. Is it possible to force son 1 to the middle and 2 to the right corner? only with 2 elements. I would not like to put a vain mark on the code. Thanks to anyone who can help!

css flexbox

asked by anonymous 18.07.2018 / 21:09

2 answers

0

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

Another solution would be to transform your 'child' divs into 'grandchildren' of the 'child2' div, and then apply the same flexbox properties you used in the parent div.

Whenever I need to consult something related to flexbox I end up using this guide: link

18.07.2018 / 21:53

Space and color between ViewCell in a ListView Separate result within each

score 2 · Accepted Answer

I advise you to simply put a margin-left and translateX() into filho1 so it stays aligned in the middle of the page!

See what's 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 on the space left in the parent by discounting the width of the filho2 is only of a margin: auto (so it aligns in the empty space that filho2 leaves inside 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

Dude I was kind of puzzled because at first I wanted to use the justify-self property, but it did not work! I went searching and found this excellent answer that may open your mind to some things of FlexBox

link

Itseemsthatjustify-selfdoesnotapplyatthistimeandalignmentintheMain-axis(X-axis)mustbedoneusingmarginsitself!

Seesomeexamplesofalignmentwithmarginsina.containerwithdisplay:flex

Ifyoureversetheaxisbychangingtheflex-directiondefaultfromrowtocolumnyoucanusealign-selftoalignasyouwant,howeveritisasifeachitem(%)lineisdifferent.

Butifyouwantyoucancorrectthisbyputtingrowinthechildren.InthisexampleIdidnotdothisbecauseit'sjustforthedidacticpurposesoftheexample.

Seetheexample:

.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>