Сжимается изображение при указании display: flex; Я создал список li и в каждом li указал изображение и тег?

Question

[Lex Fox]

Сжимается изображение при указании display: flex; Я создал список li и в каждом li указал изображение и тег
Начинаю работать со списком в CSS и указываю тегам li display:flex. После этого иконки начинают сжиматься. Из-за чего такое может быть?

такая дичь получается

Comments

[Vadim Bogomazov]

flex-shrink: 0; на img.

[Lex Fox]

не получается((

Answer 1

[Антон Усачев]

Запретить сжиматься изображениям:

img {
    width: 40px; // например
    flex: 0 0 auto;
}

Comments

[Lex Fox]

не помогло(

[Jason Marketson]

Lex Fox, li display:flex + align-items: center;

[Антон Усачев]

Lex Fox, изображению нужно при этом явно указать ширину.

[Lex Fox]

Jason Marketson, Сработало. Господи, я люблю тебя. Я с этой фигней весь день сижу. Спасибо большое!)))

[Lex Fox]

Jason Marketson, напиши это как ответ. Я отмечу это как верное.

[Антон Усачев]

А ещё изображение лучше не встраивать напрямую как блок, а создавать для него отдельный контейнер:

[Lex Fox]

Антон Усачев, возьму на заметку. Я тоже сначала думал, что такая проблема может возникнуть из-за того, что я указал как один блок. Просто я думал, что списком делать удобнее.

[Jason Marketson]

Lex Fox, готово;) Рад что получилось помочь))

[samorez999]

Спасибо, помог, вот только интересно, почему же все-таки они сжимаются, даже при установке явной ширины через css и превращении в block? Из-за flex-контейнера?

Answer 2

[Jason Marketson]

li display:flex + align-items: center;

Answer 3

[Lord_Dantes]

Из-за чего такое может быть?

Начинаю работать со списком в CSS и указываю тегам li display:flex.