Как задать ширину flex элементу правильно?

Question

[Дмитрий Матвеев]

Вот мой код блока: https://codepen.io/anon/pen/bzXPaM
Есть несколько проблем, которые я не могу решить:
1) Так как flex растягивает элементы, чтобы занять все место контейнера, то при нажатие на пустое пространство активируется input, а хотелось бы, чтобы только на видимую часть срабатывала. flex-shrink не помогает, все равно растягивается.


2) align-items не помогает, видно что текст немного выше, как это исправить?

Помогите, пожалуйста, такое ощущение что из-за верстки все так работает. Спасибо за ответ!

Answer 1

[Ankhena]

1. Делайте label только на текст, а блок оберните во что-нибудь другое.
2. line-height: 1

Comments

[Alibek Kulseitov]

Вы что-то написали не понятное) У Автора все правильно просто надо css дописать

[Ankhena]

Alibek Kulseitov, что именно не понятно?

[Alibek Kulseitov]

Я имел ввиду бред написали) я написал правильное решение ниже

[Alibek Kulseitov]

Потому что нету разницы инпут внутри или снаружи, результат не поменяется

[Ankhena]

Alibek Kulseitov, а теперь измените размер шрифта в своем правильном решении.

И хотелось бы аргументы про бред.

[Ankhena]

Alibek Kulseitov, align-items поможет, но только в том случае, если больше нет никаких потребностей в украшении блока, например, границ или фона. Да, тогда align-items поможет.

Я всегда стараюсь предлагать универсальные решения, которые останутся работоспособными и при смене дизайна. При том, что вид блока может меняться и при адаптации.

[Дмитрий Матвеев]

Спасибо, line-height помог!

Answer 2

[Alibek Kulseitov]

Как это не помогает align-items?

.sizes {
  align-items:  flex-start
}

Вот помогает же

Comments

[Rustam Bainazarov]

А как это поможет одновременно растянуть элемент и сократить его (label) зону действия? Ему обёртку нужно делать для каждого элемента, которую он будет растягивать flex'ом.

[Alibek Kulseitov]

SmthTo, тем что написал выше сокращаеат его область а чтобы расстянуть justify-content: space between

[Дмитрий Матвеев]

Спасибо!

[Rustam Bainazarov]

Alibek Kulseitov, хоть последнее свойство не для габаритов, а для дистрибьюции элементов, но в конечном итоге такой метод визуально, да, сработает.

[Дмитрий Матвеев]

Alibek Kulseitov, А вот вопрос по поводу выравнивание текста и before элемента. align-items выравнивает, но такое ощущение, что 42(2) немного ниже надо расположить. Как это исправить?