No replies
Borovi4ok's picture
Atlantic Canada
Last seen: 29 weeks 4 days ago
Atlantic Canada
Timezone: GMT-4
Joined: 2022-11-05
Posts: 1
Points: 2

Hi everyone.
I have six li flex, inside ul flex.

Some li take one line inside the block, some two.

align-items: center; - aligned all of them.

but justify-content: center; aligned only one-line content.

two-lines content on its tern, aligned only with align-items: center;

I can't get it, could someone explain me please, why it happens?


        <section class="service">
            <h2>Our services</h2>
                <li>Eye vision check</li>
                <li>Children department</li>
                <li>Laser vision correction</li>
                <li>Treatment of keratoconus</li>
                <li>Laser treatment of eye diseases</li>
                <li>Treatment of cataract</li>


body {
    font-family: corbel;
    font-size: 24px;
    width: 1100px;
    margin: auto;
    color: #14931F;
    text-align: center;
.service ul {
    display: flex;
    width: 900px;
    height: 260px;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 100px;
    padding: 0;
.service li {
    display: flex;
    background-color: #DFDBF5;
    margin: 20px;
    width: 247px;
    height: 100px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    text-align: center;

Thank you