Skip to main content
1 de 2
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Creio que o flexbox deveria ser a div .preenchidaAutomaticamente, e não a .containerConversa2, porque é na primeira onde serão mostradas as mensagens.

Então, você poderia usar align-self para alinhar uma classe à esquerda e outra à direita. A da esquerda ficaria com align-self: flex-start; e a da esquerda comalign-self: flex-end;. Vou colocar um exemplo abaixo. A estilização (cores, margens etc.) fica por sua conta:

.preenchidaAutomaticamente{
    display:flex;
    flex-direction:column;
    background: yellow;
}

.receptor{
   max-width: 50%;
   background: blue;
   color: white;
   align-self: flex-start;
   margin: 10px;
}

.transmissor{
   max-width: 50%;
   background: green;
   color: white;
   align-self: flex-end;
   margin: 10px;
}
<div class="containerConversa2">
   <div class="conversa">
      <div class="preenchidaAutomaticamente">
         <div class="receptor"><strong>Receptor:</strong><br>A propriedade align-items define a propriedade align-self em todos os itens da flex como um grupo. Isto significa que tu podes explicitamente declarar a propriedade align-self para visar um único item. A propriedade align-self aceita todos os valores da align-items , mais o valor  auto, que irá dar reset ao valor definido na flex container.</div>
         <div class="transmissor"><strong>Transmissor:</strong><br>Até agora observámos o comportamento quando o nosso flex-direction é row, enquanto trabalhamos numa linguagem escrita de cima a baixo. Isto significa que o eixo principal "corre" horizontalmente, e o alinhamento do nosso eixo transversal muda os itens para cima e para baixo.</div>
      </div>
   </div>
</div>

Sam
  • 80,8mil
  • 22
  • 73
  • 128