Как разделить display flex?

Question

[Андрей Годунко]

Иконка температуры с температурой должна быть сверху, а иконка влажности с влажностью внизу. Но я не могу разделить блоки потому что они все в display: flex;. Я ни как не могу найти свойство которое может разделить эти блоки. I true

Comments

[Ankhena]

Скрин бы...

[Андрей Годунко]

Ankhena, Емм, ну просто чтобы показатели влажности были снизу температуры и все. Как бы просто сделать для блока wet отступ

[Ankhena]

Андрей Годунко, уберите флекс, блоки по умолчанию сами располагаются в столбик.

p.s.
Если что, это

align-items:center; /*Гаризонталь*/

не горизонталь.
А выравнивание вдоль поперечной оси.
В вашем случае она идет вертикально сверху вниз.

[Андрей Годунко]

Ankhena, Ммм, подскажи пожалуйста как мне переместить блок wet под температуру. Будь-то сделать абзац

[Ankhena]

Андрей Годунко, да я же написала: стереть всё про флекс у родителя.
https://codepen.io/AnnaSummer/pen/mdpJxLP

[Андрей Годунко]

· Ты мне предложила убрать flex у папы, все выходит так как надо. Но как значит мне перестроить иконку и температуру в одну строку?
· Мне нужно чтобы в конечном результате нужно чтобы было

вот так

· Если поставить у обоих flex все выходит так надо, но вот оны все отдаляются друг от друга

вот так

[Ankhena]

Андрей Годунко, оу, не может быть... наконец-то скрин...

Два <p> один под другим.
В каждом текст и псевдоэлемент (с картинкой) - флексом или гридом. Можно даже и без флекса. Псевдоэлемент сделать инлайн-блочным. И задать ему vertical-align: middle.

Альтернатива: вставлять картинки просто фоном, но может быть сложнее при адаптиве.

Если очень хочется оставить картинку как img, то нужно задать ей атрибут aria-hidden="true", а дальше любым из способов: инлайн-блоком, флексами или гридами.

[ambisinister One]

Андрей Годунко, Так она сплошная.
Как Вы её разделить флексом пробуете? Может, проще их по отдельности вставить?
Лучше svg использовать...

[Андрей Годунко]

Ankhena, Пожалуйста отметь это в ответ, я хочу его отметить. Спасибо что выручаешь меня и даешь развёрнутые ответы, не зря ты Куратор тега CSS

[Андрей Годунко]

ambisinister One, Мне не надо было разделять картинку. Надо было разделить блоки. По типу температура и конка ее сверху, а влажность и иконка влажности с низу

Answer 1

[Ankhena]

Два <p> один под другим.
В каждом текст и псевдоэлемент (с картинкой) - флексом или гридом. Можно даже и без флекса. Псевдоэлемент сделать инлайн-блочным. И задать ему vertical-align: middle.

Альтернатива: вставлять картинки просто фоном, но может быть сложнее при адаптиве.

Если очень хочется оставить картинку как img, то нужно задать ей атрибут aria-hidden="true", а дальше любым из способов: инлайн-блоком, флексами или гридами.

Answer 2

[Юрий Иванов]

а почему именно флекс, вот так же вроде можно сделать
https://codepen.io/scrappyjs666/pen/KKZpeMw