今天繼續接著對話的部分~
估計這部分可以多蹭個好幾天

因為現在做的是使用者方，
所以他應該要位於的是聊天室的右方。

.message-content{
    display: grid;
}
.you-message{
    justify-content: end;
}
.you-message .message-content{
    justify-items: end;
}

• dispaly : grid
  和flex一樣，需要定義容器的顯示類型，
  那為甚麼這邊要使用grid而不是fles呢，
  grid 和 flex 最大不同之處，
  grid是由 column及row定義出直排與橫列的格線，
  內容再依隔線作安排。
  而我們的對話內容跟對話時間都是一排一排的呈現，
  這樣各位應該比較了解兩者的使用方式。
• justify - content
• justify - items
  這兩個屬性基本上就是控制內容在範圍內的對齊方式，
  他有非常多的設定方式這邊就不多做介紹，
  而end就是從對齊尾端的意思，
  content是針對文字使他對齊最尾端也就是對話框的右邊，
  items是針對文字的對話框對齊的是聊天室的最右邊。