간단한 채팅 UI 레이아웃 css

채팅

 

 

 

 

const Chat = () => {
  return (
    <div className="chat">
      <div className="chat-bubble-right">
        <p>감사합니다.</p>
      </div>
      <div className="chat-bubble-left">
        <p>
          항상 배우고 있습니다. 문제는 때때로 당신이 멈추고 세상을 이해한다고
          생각한다는 것입니다. 이것은 올바르지 않습니다. 세상은 항상 움직입니다.
          노력을 멈출 수 있는 지점에 결코 도달하지 못합니다.
        </p>
      </div>
      <div className="chat-bubble-right">
        <p>인생의 비결은 일곱 번 넘어지고 여덟 번 일어나는 것입니다.</p>
      </div>
      <div className="chat-bubble-left">
        <p>
          맞습니다. 어떻게 사느냐에 따라 인생이 짧아보일 수도 길어보일 수도
          있습니다.
        </p>
      </div>
      <div className="chat-bubble-right">
        <p>이유 없는 삶은 결과 없는 삶입니다.</p>
      </div>
    </div>
  );
};

export default Chat;

.chat {
  margin: 0 auto;
  list-style: none;
  width: 1000px;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  padding: 20px;
  border: 1px solid $black;
}

.chat-bubble-left {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  p {
    max-width: 450px;
    background-color: $background;
    padding: 10px;
    margin-top: 28px;
    border-radius: 10px;
    word-wrap: break-word;
  }
}

.chat-bubble-right {
  display: flex;

  justify-content: flex-end;

  width: 100%;
  p {
    max-width: 450px;
    padding: 10px;
    margin-top: 28px;
    border-radius: 10px;
    word-wrap: break-word;
    color: $white;
    background-color: $primary;
  }
}

 

적절히 flex를 잘 활용해서 만들었다 

그리고 포인트는 

 

word-wrap과 max-width이다.