I give general tips and turn to the details of your code:
When layout, be interested in the purpose of CSS properties. That is, the argument of use is simply because “this is how it works”, use it last (if everything else does not work).
For example, you use the direction property. This property is intended to indicate the direction of the text. In most languages, the text is written from left to right ( ltr is the default), but Arabic and Hebrew text is written from right to left and the direction: rtl; indicated for this text direction: rtl; . It turns out that you are using this property for other purposes.
Careful use absolute positioning. Ideally, use it only when it is necessary that the elements overlap others and the element is removed from the display stream. For example, modal windows, drop-down lists with a more complex display than standard select , etc. Also used for some recipes such as placing an icon inside a text field. But in this case I do not see the need for absolute positioning.
Use pseudo-selectors with great care (for example, first-child; only-child , nth-child , etc.). Because pseudo-selectors
- ignore visible block or not. That is, if you hide one of the blocks using
display: none , it will still be taken into account when applying a pseudo-selector. when applying, take into account only the sequence number of the element relative to the parent. That is, the .item:nth-child(even) pseudo- .item:nth-child(even) works like this: “select every even child who has an item class”, and not so “select every even element with an item class”. Illustrating by example:
.item:nth-child(even) { background-color: red; }
<div class="container"> <div class="not-item"> One (not item) </div> <div class="item"> Two (item) </div> <div class="item"> Three (item) </div> <div class="not-item"> Four (not item) </div> <div class="item"> Five (item) </div> <div class="item"> Six (item) </div> </div>
If you add elements next to .item , the layout may break.
Therefore, I recommend to look, it may be worth asking separate classes for special types of elements.
In this case, I also believe that chat means that there can be several messages from one user in a row. Therefore, applying styles only to even elements seems to be incorrect.
Examine the flexbox. The arrangement of elements using float , clear , vertical-align does not have such power and is not as flexible and maintainable.
Learn CSS methodology. BEM or SMACSS. So that you can easily change the layout, as well as if the same blocks or similar ones are needed on other pages, you would easily add and change them. In the example, I will use BEM.
Do not use faceless or ambiguous names like .item . It could be anything. The use of this class depends on who is the parent and what is next. And this means that if a .item block is added .item , the same styles will be applied for it, which may be undesirable. Treat selectors as well as variables. They must have a strictly defined purpose and the name must clearly reflect it. If you call chat-item , for example, then the meaning of this block is clearer.
Treat layout as programming, for which ease of perception, flexibility and maintainability are important. Also equally important is the compliance of standards. Layout spoil duplication code, try to avoid them. The use of modern preprocessors with variables, cycles, conditions makes the layout almost indistinguishable from programming.
results
For each series of messages, I created a .chat-item block, where the avatar and one or more messages from the user will be located.
In order to apply styles to invert the layout (for the responding) column, I set the flex-direction: row-reverse; That inverts the order of the elements.
The BEM methodology is used here.
In order not to create additional classes for nested elements when inverting, I sacrificed the purity of BEM and added selectors with nesting ( .chat__item--responder .chat__message , .chat__item--responder .chat__message-content ). According to the methodology itself (ideally), only classes without nesting should be used.
As a result, the code might look like this:
.chat__header { text-align: center; } .chat__item { display: flex; align-items: flex-start; } .chat__person-avatar { border-radius: 50%; } .chat__messages { margin-left: 10px; } .chat__message { display: flex; align-items: center; margin-right: 10px; } .chat__message-content { border-radius: 5px; padding: 7px; background-color: #ccc; display: inline-block; margin-left: 5px; } .chat__item--responder { flex-direction: row-reverse; } .chat__item--responder .chat__message { flex-direction: row-reverse; } .chat__item--responder .chat__message-content { margin-left: 0; margin-right: 5px; }
<div class="chat"> <h1 class="chat__header">Chat</h1> <div class="chat__content"> <div class="chat__item"> <img src="http://placekitten.com/40/50" alt="photo" class="chat__person-avatar"> <div class="chat__messages"> <div class="chat__message"> <div class="chat__message-time">9:03</div> <div class="chat__message-content">Hi</div> </div> <div class="chat__message"> <div class="chat__message-time">9:03</div> <div class="chat__message-content">How are you?</div> </div> </div> </div> <div class="chat__item chat__item--responder"> <img src="http://placekitten.com/40/50" alt="photo" class="chat__person-avatar"> <div class="chat__messages"> <div class="chat__message"> <div class="chat__message-time">9:05</div> <div class="chat__message-content">Hello</div> </div> <div class="chat__message"> <div class="chat__message-time">9:07</div> <div class="chat__message-content">I'm fine. Let's have a dinner today.</div> </div> <div class="chat__message"> <div class="chat__message-time">9:07</div> <div class="chat__message-content">What do you think about it? </div> </div> </div> </div> </div>
