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>
Cara I made an edition in my reply with some details that may interest you, it is more for didactic purposes, but I think it will clarify well how to do this kind of alignment
– hugocsl