Как правильно реализовать по БЭМ?

Question

[svr5]

Помогите пожалуйста правильно реализовать по БЭМ такую штуку с ценой

150 р /кг
Где цена 150 - одного размера
Р - рубли другого размера и равняются по верху цены вместе с (/кг)
/ кг - еще меньше размера
Я делал так: 1 - делал блок общий и ему прописывал display: flex
2 - рубли с килограммами еще в одну __обертку и этому элементу прописывал flex
3- и внутри равнял уже margin
Вот так делал, но чувствую что это все как-то некрасиво((
P.S хотел все реализовать inline-block и span для рублей и килограмм, но весь проект идет по БЭМ и flexbox

Comments

[Егор Живагин]

А можешь просто кусок макета или скрин скинуть, как должно быть?

[svr5]

Егор Живагин,
joxi.ru/krD00nBt0NW5Xr

[Егор Живагин]

svr5, ты нормально делал, только вместо того, чтобы в пункте 3 равнять margin-ом - пробуй изменять justify-content и align-items

[Егор Живагин]

svr5, вариант красивее оставил в ответах

Answer 1

[Егор Живагин]

Можно сделать один общий блок на всех со стилем

align-items: flex-start;
display: flex;

И в него положить эти 3 блока. А цвет и размер задавать непосредственно им.
Вес двигать через self-align или тем же margin-ом

Answer 2

[Никита Кит]

Не поленись часик посидеть за доками и узнать о бэм всё что нужно. Это будет для тебя гораздо полезнее, чем просить пример готового кода
https://ru.bem.info/methodology/key-concepts/
https://ru.bem.info/methodology/naming-convention/

Comments

[svr5]

Хорошо, обязательно!
Спасибо!