Картки універсальні, візуально привабливі, з ними легко взаємодіяти як на великих, так і на маленьких пристроях, що ідеально підходить для адаптивного дизайну.
Кожна картка діє як контейнер вмісту, який легко масштабується вгору або вниз. Оскільки розміри екрана стають меншими, кількість карток у рядку зазвичай зменшується, і вони починають складатися вертикально. Існує додаткова гнучкість, оскільки вони можуть бути фіксованою або змінною висотою.
Приклади створення макетів карток Flexbox, який має ряд із чотирьох горизонтальних контейнерів на великих екранах, два на середніх і один стовпець для невеликих пристроях.
Приклад 1
See the Pen Cards flexbox 1 by kravets (@raisa69) on CodePen.
Приклад 2
See the Pen card-flexbox-responsive by kravets (@raisa69) on CodePen.
Приклад 3
See the Pen Css Responsive flexbox card by kravets (@raisa69) on CodePen.
Приклад 4
See the Pen Responsive Card Layout with Media Objects Made with Flexbox by kravets (@raisa69) on CodePen.
Приклад 5
Картки реалізовані за допомогою маркованого списку
See the Pen Flexbox list grid by kravets (@raisa69) on CodePen.
Завдання 1
Створити макет адаптивної сторінки з картками такого зразка
Завдання 2
Доповнити вихідний код властивостями flexbox для реалізації адаптивних карток за зразком
- на великих екранах:
- на малих екранах:
See the Pen card center task by kravets (@raisa69) on CodePen.
Завдання 3
Доповнити вихідний код властивостями flexbox для реалізації адаптивних карток за зразком
- на великих екранах:
- на малих екранах:
See the Pen cards column task by kravets (@raisa69) on CodePen.
Завдання 4
Створити адаптивну форму з застосуванням технології flexbox як на зображенні
