K
K
kaidos2021-07-20 12:47:11
css
kaidos, 2021-07-20 12:47:11

How to make one div be on the right and the other on the left, and when duplicated, they will be on a new line?

It needs to be like this.
IfHYhvqF41k.jpg?size=1920x1080&quality=96&sign=27a15b4a5451a6100c395bcc94034d6b&type=album
And I have it like this)
8UoNTXi1Hgs.jpg?size=1920x1080&quality=96&sign=f55546a3814de116b85de5811aa61092&type=album

<div class="message_content-bar">

            <div class="message-wrapper">
                <a class="message-to-you">ogfjgfhgfhgfhhf</a>
                <a class="message-to-you">fdhgfhh</a>
                <a class="message-to-you">gfgfhhgfh</a> 
                <a class="message-to-your">fddhlghp</a>
                <a class="message-to-your">fddhhp</a>
                <a class="message-to-you">gfgfhhgfh</a>
                <a class="message-to-your">ogfjgfhgfhgfhhf</a>
            </div>

        </div>


.message_content-bar{
    height: 100%;
    overflow: auto;
    user-select: text;
    padding: 0 10px;
}

.message-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.message-to-you{
    width: fit-content;
    padding: 7px;
    border-radius: 9px;
    background-color: #C4C4C4;
    margin-top: 10px;
}

.message-to-your{
    width: fit-content;
    padding: 7px;
    border-radius: 9px;
    background-color: #C4C4C4;
    margin-top: 10px;
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Ankhena, 2021-07-20
@kaidos

align-self is responsible for aligning a particular element along the flexbox's transverse axis.
For those that need to go right, use align-self: flex-end

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question