1

Recentemente ando entrando em contato com o flexbox, descobri a propriedade justify-content: space-between; porém eu queria saber se é possível:

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

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

Deste modo .filho1 fica no canto esquerdo e .filho2 no direito. Se eu colocasse um terceiro .filho3, o .filho2 iria para o meio e o filho3 para o canto direito. É possível forçar que o filho1 fosse para o meio e o 2 para o canto direito? só com 2 elementos. Não gostaria de colocar uma marcação em vão no código. Obrigado a quem puder ajudar!

1
  • Cara fiz uma edição na minha resposta com uns detalhes que pode te interessar, é mais para fins didáticos, mas acho que vai esclarecer bem como fazer esse tipo de alinhamento
    – hugocsl
    19/07/2018 às 13:02

2 Respostas 2

2

Eu te aconselho a simplesmente colocar um margin-left e translateX() no filho1 Assim ele fica alinhado no meio da página!

Veja como fica nesse exemplo

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

Para alinha o filho1 no espaço que sobra no pai descontando a largura do filho2 é só da um margin: auto (assim ele alinha no espaço vazio que o filho2 deixar dentro do 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

Cara eu fiquei meio intrigado pq a princípio eu queria usar a propriedade justify-self, mas ela não funcionou! Ai fui pesquisar e achei essa excelente resposta que pode te abrir a cabeça para algumas coisas do FlexBox

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

inserir a descrição da imagem aqui

Aparentemente justify-self não se aplica nessa ocasião e o alinhamento no Main-axis (eixo X) deve ser feito utilizando margins mesmo!

Veja alguns exemplos do alinhamento com as margens em um .container com display:flex

inserir a descrição da imagem aqui


OBS: Se vc inverter o eixo mudando o flex-direction default de row para column ai vc pode usar o align-self para alinhar como quiser, porém é como se cada item ficasse em uma row (linha) diferente.

Porém se vc desejar vc pode corrigir isso colocando position: absolute; nos filhos. Nesse exemplo eu não fiz isso pois é apenas para fins didáticos do exemplo.

Veja o exemplo:

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

0

Talvez não sejam as melhores formas, mas vejo duas possibilidades que podem lhe ajudar. Uma delas é utilizando justify-content: flex-end, isso fará com que seus itens comecem a ser alinhados a partir da direita. Talvez não seja exatamente o que você procura, mas pode lhe ajudar.

Outra solução, seria transformar suas divs 'filho' em 'netos' da div 'filho2', e então aplicar à ela as mesmas propriedades de flexbox que você utilizou na div pai.

Sempre que preciso consultar alguma coisa relacionada ao flexbox acabo utilizando esse guia: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .