For the chat bubble that is supposed to be on the left, you don’t really need to do anything, and for the chat bubble that is supposed to be on the right, add an align-self: flex-end.

Use of a single positive integer as the flex value on a flex item is making use of one of the flex keyword values.This keyword resolves to a flex-grow value of whatever the positive integer was, a flex-shrink value of 1 and a flex-basis of 0.Īs for the chat bubbles within the message area, each role has their own class, e.g. * Visual styles not included here but they exist */įlex: 1 /* Allows the message area to expand with viewport height */ display: flex Ī flex: 1 on the message area while its parent ( ) is a flex container with a flex direction of column means that the message area will grow to fill up additional space as viewport height increases, or vice versa. Within the messages area, individual messages would be their own element, laid out left and right.ĭisplay: flex /* Because I have a close button I want aligned with the title text */ align-items: center You would need a container for the entire chat window, divy-ed up into a header, a messages area and the input area right at the bottom. So the layout should look something like this: CSS-ing the chat interfaceįirst, I’ll quickly give a broad overview of how a basic chat interface’s CSS looks like. TL:DR, the fix involves using auto margins instead of the justify-content property. But I did create a bug in the interface when using the box alignment properties for the messages area. Such an interface is not tricky to build with Flexbox and the Box Alignment properties. Of course there are also some interfaces (Slack) which align all the messages on the left, but the ones I use regularly (Whatsapp, WeChat, Twitter) use the aforementioned left-right style. Usually your own messages would appear on the right, while received messages would appear on the left.

There would be an input kissing the bottom of the window, with messages displayed in the chat window on either side depending on who said what. Recently I was working on a few chat interfaces, and the general layout is typical to what you would see in most chat applications.

Display flex text align center