Align div with css

Asked

Viewed 78 times

2

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

I have this html structure that is going to be filled automatically,And if it’s a completely left receiver class, something like the Whats app messages, the incoming messages line up on the left and the incoming ones line up on the right, how can I do that using css? the css of the containerConversa2 class is this below 

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

3 answers

1

If you have a container flex, you must use margin in the child elements to place the right or left

  • margin-left: auto will judge the son totally right
  • margin-right: auto will play the son totally left

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

  • Thank you, thank you very much

  • @Israellllopes without problems friend

1


I think the flexbox should be the div .preenchidaAutomaticamente, and not the .containerConversa2, because it is the first where the messages will be shown.

So you could use align-self to align one class to the left and one to the right. The left would be with align-self: flex-start; and the left withalign-self: flex-end;. I’ll put an example below. The styling (colors, margins etc.) is on you:

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

  • Thank you, it worked ,just a little something that I think Oce did not understand very well,was the div fillingAutomatically she that would be the transmitter and receiver hehe put fillingAutomatically just to say that would fill up kkk but anyway,I thank friend

  • Ah yes rss... I got it wrong then. But still you can get a sense of what I put. Abs!

1

Solution: Mixed CSS Flex layout model and CSS Grid Layout

Upside: Greater flexibility with message container.

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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.