2
<div className="containerConversa2">
            <div className="conversa">
              <div className="preenchidaAutomaticamente">teste </div>
            </div>
</div>

Tenho essa estrutura em html que vai ser preenchida automaticamente,a div com classe preenchidaAutomaticamente vai ser em forma de coluna cada vez que chegar uma mensagem,daí quero fazer com que se for a classe transmissor,ela fique alinhada totalmente à direita,e se for classe receptor totalmente à esquerda,algo parecido com as mensagens do whats app , as mensagens recebidas se alinham na esquerda e as que são enviadas ficam na direita,como posso fazer isso usando css? o css da classe containerConversa2 é esse abaixo

.containerConversa2{
    display:flex;
    flex-direction:column;
}

3 Respostas 3

1

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, .transmissor{
   max-width: 50%;
   color: white;
   margin: 10px;
   padding: 10px;
   border-radius: 10px;
}

.receptor{
   background: blue;
   align-self: flex-start;
}

.transmissor{
   background: green;
   align-self: flex-end;
}
<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>

2
  • Obrigado,deu certo ,só uma coisinha quqe acho que voce não entendeu muito bem,foi a div preencherAutomaticamente ela que iria ser o transmissor e receptor hehe coloquei preencherAutomaticamente só pra dizer que irira se preencher kkk mas enfim,deu certo,agradeço amigo Commented 3/09/2019 às 15:52
  • Ah sim rss... eu entendi errado então. Mas mesmo assim dá pra ter uma noção com o que coloquei. Abs!
    – Sam
    Commented 3/09/2019 às 15:54
1

Se vc tem um container flex, vc deve usar margin nos elementos filhos para colocar a direita ou a esquerda

  • margin-left: auto vai jugar o filho totalmente a direita
  • margin-right: auto vai jugar o filho totalmente a esquerda

  .containerConversa2 {
  display: flex;
  flex-direction: column;
  margin:auto;
  border: 1px solid #000;
}
.conversa {
  width: 200px;
  border: 1px solid #000;
}
.transmissor {
  margin-right: auto;
}
.receptor  {
  margin-left: auto;

}
<div class="containerConversa2">
	<div class="conversa transmissor">
		<div class="preenchidaAutomaticamente">transmissor</div>
	</div>
	<div class="conversa receptor">
		<div class="preenchidaAutomaticamente">receptor</div>
	</div>
</div>

2
  • Agradeço,muito obrigado Commented 3/09/2019 às 15:59
  • @IsraellLlopes sem problemas amigo
    – hugocsl
    Commented 3/09/2019 às 16:23
1

Solução: Mixed CSS Flex layout model e CSS Grid Layout

Vantagem: Maior flexibilidade com container das mensagens.

html,
body {
  height: 100%;
}
body {
  display: flex;
  background: rgba(217,190,167,1);
}
.chat {
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50vw;
  min-height: 393px;
  height: 50vh;
  margin: auto;
  background: rgba(236,229,221,1);  
}
.chat:before {
  content: "Someone Profile";
  display: inherit;
  padding: 5% 7%;
  color: rgba(255,255,255,1);
  background: rgba(7,94,84,1);
}
.message {
  display: grid;
  grid-gap: 1.125rem;
  grid-auto-rows: min-content;
  padding: .5625rem;
}
.sender {
  justify-self: end
}
.message__content {
  width: 75%;
  padding: .5625rem;
  border-radius: 7px;
  background: rgba(255,255,255,1);
}
<section class="chat">
  <article class="message">
    <p class="message__content  sender">sender message</p>
    <p class="message__content">receiver message</p>
  </article>
</section>

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 .