Практика
Сделаем ещё один блок. Что-то вроде формы подписки.
<div class="layout-center-wrap mar30-tb">
<div class="layout-wrap flex flex-wrap-tablet flex-vcenter">
<div class="flex-shrink4 w600px-max pad40-r pad0-tablet">
<img src="git.svg" alt="">
</div>
<div class="flex-shrink1 flex-grow2 pad40-tb">
<div class="h2">Подписка</div>
<div class="t120 t-gray600 mar10-t">Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
<form>
<div class="mar20-t">
<input class="form-input w100" type="email" placeholder="email">
<div class="t90 t-italic t-gray600">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</div>
</div>
<div class="mar40-t"><button class="button button1" type="submit"><i class="fas fa-envelope mar10-r"></i>Подписаться</button></div>
</form>
</div>
</div>
</div>
Особенность здесь в том, что используется shrink и grow для того, чтобы подобрать оптимальный размер ячеек. При этом приоритет имеет ячейка с формой, поскольку она важнее изображения.
У тебя будут часто встречаться ситуации, когда придётся выбирать между красивой картинкой или полезными данными.
Обрати внимание как организован внутренний отступ у ячейки изображения. По умолчанию выставлен pad40-r, но на телефоне он сбрасывается до нуля с помощью pad0-tablet.
Ещё пример
В этом примере тебе должно быть всё знакомо, кроме способа объединения поля ввода с кнопкой.
<div class="layout-center-wrap mar30-tb">
<div class="layout-wrap flex flex-jc-center">
<div class="w-tablet-max">
<div class="h2 t-center">Подписка</div>
<div class="t120 t-gray600 mar10-t t-center">Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
<div class="mar20-t">
<form>
<div class="flex">
<input class="form-input flex-grow5 bor-none-r" type="email" placeholder="email">
<button class="button button1" style="border-radius: 0 5px 5px 0" type="submit"><i class="fas fa-envelope mar10-r"></i>Подписаться</button></div>
</form>
</div>
<div class="mar5-t t90 t-gray600 t-center">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
Класс w-tablet-max ограничивает ширину тем же размером, что и tablet — 768px.
Разберём как разместить кнопку с полем ввода. Для этого их помещаем во flex-сетку. Для INPUT ширину задаём с помощью flex-grow5, то есть даём максимально возможное пустое пространство. В итоге элементы окажутся рядом друг с другом.
Теперь нужно решить вопрос с бордюрами и скруглением. Для INPUT можно просто спрятать правую границу с помощью bor-none-r. А вот для кнопки мы прописываем отдельным стилем border-radius: 0 10px 10px 0.
Это означает: задать скругление сверху слева 0, справа сверху 5px, справа снизу 5px и снизу слева — 0. Это тот же «циферблат часов», с помощью которого указываются значения для margin, padding и других css-свойств.
Задания
Задание в этот раз немного необычное, рассчитанное на самоконтроль.
Тебе нужно выписать отдельно все классы, которые использовались в примерах на этом и предыдущем уроке: в одной строке один класс.
Возле каждого класса напиши его назначение, в идеале его css-свойство и значение. Не подглядывай в справку Berry CSS или другие справочники. Это задание именно на самоконтроль, чтобы ты мог оценить насколько усвоил прошедшие уроки.
Если ты не можешь описать назначение классов, то тебе следует вернуться назад и чуть внимательней пройти уроки и выполнить предложенные задания.
Если же ты без труда ориентируешься в классах Berry CSS, значит ты готов к контрольной работе.