No replies
Borovi4ok
Borovi4ok's picture
Offline
newbie
Atlantic Canada
Last seen: 4 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?

HTML

<body>
        <section class="service">
            <h2>Our services</h2>
            <ul>
                <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>
            </ul>
        </section>
</body>

CSS

body {
    font-family: corbel;
    font-size: 24px;
    width: 1100px;
    margin: auto;
}
 
 
h2,h3{
    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