Карточки с ценами
Теперь три карточки с ценами. Они стоят рядом в строке на расстоянии 16px друг от друга и вместе занимают всю ширину содержимого страницы. Каждой карточке нужно не меньше 200px, поэтому на узком экране в одну строку они все не помещаются. Тогда в строке остаётся столько карточек, сколько помещается, остальные переносятся на следующую строку, на 16px ниже, а карточки в каждой строке растут и заполняют её.
Описания в карточках разной длины, но карточки в одной строке одинаковой высоты. Кнопки Выбрать прижаты к самому низу карточек, поэтому все они на одном уровне.
Чтобы увидеть, как карточки переносятся, сделайте окно браузера уже (или шире, если они уже переносятся).
После этого упражнения страница выглядит так (в уменьшенном виде):
Подсказка: каждая карточка — flex-элемент, но её содержимое тоже можно разложить с помощью flexbox, в столбец. И помните, какие элементы получают свободное место.
Задание
- 1
Карточки стоят рядом на расстоянии 16px и занимают всю ширину содержимого страницы. Каждая карточка шириной не меньше 200px: карточки, которые не помещаются, переносятся на следующую строку, на 16px ниже, и тоже заполняют её.
- 2
Кнопки Выбрать прижаты к самому низу своих карточек, все на одном уровне.