今天要講的是金魚都能懂的網頁切版 : 訊息對話紀錄 NO018，
像我這樣的邊緣人，
可以用這個來製造出有人跟我對話的假象，
好像也是滿實用的啦

本篇關鍵字

• justify-content
• order
• ::before（沒錯又是我！）

範例檔

（以上是我個人對此部影片的心得）

HTML

  <div class="conversation">
    <div class="user remote">
      <div class="avatar">
        <div class="pic">
          <img src="https://i.imgur.com/QtwkIC0.png" alt="">
        </div>
        <div class="name">Shark</div>
      </div>
      <div class="text">
        快去練切版！！！
      </div>
    </div>
    <div class="user local">
      <div class="avatar">
        <div class="pic">
          <img src="https://i.imgur.com/wjdGrFW.png" alt="">
        </div>
        <div class="name">Goldfish</div>
      </div>
      <div class="text">我也想練啊，可是影片一片白@@</div>
    </div>
    <div class="user remote">
      <div class="avatar">
        <div class="pic">
          <img src="https://i.imgur.com/QtwkIC0.png" alt="">
        </div>
        <div class="name">Shark</div>
      </div>
      <div class="text">
        怎麼可能！！ 哪一部我去檢查？
      </div>
    </div>
    <div class="user local">
      <div class="avatar">
        <div class="pic">
          <img src="https://i.imgur.com/wjdGrFW.png" alt="">
        </div>
        <div class="name">Goldfish</div>
      </div>
      <div class="text">NO018 那篇，好像在教訊息對話紀錄</div>
    </div>
    <div class="user remote">
      <div class="avatar">
        <div class="pic">
          <img src="https://i.imgur.com/QtwkIC0.png" alt="">
        </div>
        <div class="name">Shark</div>
      </div>
      <div class="text">
        我剛剛確認過了，影片沒有問題啊？是你電腦或是螢幕有問題吧！
      </div>
    </div>
    <div class="user local">
      <div class="avatar">
        <div class="pic">
          <img src="https://i.imgur.com/wjdGrFW.png" alt="">
        </div>
        <div class="name">Goldfish</div>
      </div>
      <div class="text">你放閃放那麼徹底，根本是超級大閃光！要我們看什麼！！</div>
    </div>
  </div>

CSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}

.conversation {
  width: 500px;
  background-color: #A5DEE4;
  padding: 30px 30px 15px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px 5px #aaa;
}

.user {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.user.local {
  justify-content: flex-end;
}

.avatar {
  text-align: center;
}

.avatar .pic {
  width: 60px;
  margin-bottom: 5px;
  border-radius: 50%;
  background-color: #fff;
}

.avatar .pic img {
  width: 100%;
  vertical-align: middle;
  transform: scale(.7);
}

.avatar .name {
  font-size: 14px;
  color: #444;
}

.local .avatar {
  order: 1;
}

.text {
  padding: 15px;
  border-radius: 15px;
  position: relative;
}

.remote .text {
  color: #fff;
  background-color: #001427;
  margin-left: 20px;
  margin-right: 80px;
}

.local .text {
  background-color: #F4D58D;
  margin-left: 80px;
  margin-right: 20px;
}

.text::before {
  content: '';
  position: absolute;
  top: 15px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.remote .text::before {
  left: -8px;
  border-right: 10px solid #001427;
}

.local .text::before {
  right: -8px;
  border-left: 10px solid #F4D58D;
}

喪屍分解

• 使用 justify-content: flex-end 將 .local 靠右
• 再搭配 order: 1，讓 .local 圖片文字位置對調
• 值得注意的是，在 .remote .text 以及 .local .text 的部分皆有設定 margin-left 及 margin-right，算是限制住 .text 的範圍
• 最後再使用在 Day 07 | 有沒有別的辦法？ - 不使用多重背景 裡面有提到的::before、::after 三角形製作方式，作出對話框的模樣

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是方塊酥版面。