I have style for ul like this: ul {

Question

I have style for ul like this: ul {

display: flex;
justify-content: center;
align-items: center:
}

what i want is set first child and last child of ul to left and right. other element center. how can i do that?

0

20.11.2023

23 ответов

54 просмотра

Mr Thieves Автор вопроса

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺
Try: ul li:first-child { justify-self: flex-sta...

not work.

0

20.11.2023

Harsh ◖◔ᴥ◔◗

Mr Thieves
not work.

ul must have enough width too ig

0

20.11.2023

Mr Thieves Автор вопроса

Harsh ◖◔ᴥ◔◗
ul must have enough width too ig

The display: flex property on the parent element prevents justify-self from having an effect. Try setting the display: flex property on the parent to display: grid.

0

20.11.2023

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺

Mr Thieves
The display: flex property on the parent element p...

hmmmm

0

20.11.2023

Mr Thieves Автор вопроса

Harsh ◖◔ᴥ◔◗
ul must have enough width too ig

i set it to 100%

0

20.11.2023

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺

Mr Thieves
i set it to 100%

ul li:first-child { margin-right: auto; } ul li:last-child { margin-left: auto; }

0

20.11.2023

Mr Thieves Автор вопроса

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺
ul li:first-child { margin-right: auto; } ul li...

thanks this work.

0

20.11.2023

Harsh ◖◔ᴥ◔◗

Mr Thieves
The display: flex property on the parent element p...

One way to do it by ul { display: flex; justify-content: space-between; align-items: center; } With following html <ul> <li>test</li> <li> <span>test</span> <span>test</span> </li> <li>test</li> </ul>

0

20.11.2023

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺

Harsh ◖◔ᴥ◔◗
One way to do it by ul { display: flex; jus...

No!

0

20.11.2023

Mr Thieves Автор вопроса

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺
ul li:first-child { margin-right: auto; } ul li...

it has one probelem when i set it in mobile view. items between first and last child become flex-start.

0

20.11.2023

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺

Mr Thieves
it has one probelem when i set it in mobile view. ...

What

0

20.11.2023

Mr Thieves Автор вопроса

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺
What

items that is not first child and last child has set to be in center. so in desktop view is something like this: X—————-x-x-x-x———————-X but when i switch to mobile view: i want become like this: X——x -xxx——-X not this: X—-x xxxx——-X

0

20.11.2023

Mr Thieves Автор вопроса

this is my css. plus with your css

0

20.11.2023

Mr Thieves Автор вопроса

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺
ul li:first-child { margin-right: auto; } ul li...

my css + this.

0

20.11.2023

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺