MoreLesson 266Free preview

Chat Messages

This lesson is part of How To · All levels

Summary

Chat messages are a bubble-shaped display of conversation that is separated between the sender and the receiver. Flexbox makes it easier to arrange messages to the left or right, while maximum width keeps the line readable. Include a clear time and sender marker to make the conversation easy to follow.

Key points

Use the flex column on the chat container to make the message vertically arranged.
Align-self: flex-end placing the sender bubble on the right side.
The max-width on the bubble prevents the text line from being too long.
The element <time datetime="..."> gives semantic meaning at the time of the message.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.