课程: Advanced Responsive Layouts with CSS Flexbox

今天就学习课程吧！

今天就开通帐号，24,700 门业界名师课程任您挑！

Challenges with card layouts

Challenges with card layouts - CSS教程

课程: Advanced Responsive Layouts with CSS Flexbox

开始一个月试用 购买团队方案

Challenges with card layouts

“

- Card-based Layouts are a popular design pattern on the web right now, both for mobile and desktop, and for good reason. Cards are visually appealing, easy to interact with, and they allow us to communicate multiple different pieces of information to the viewer in an understandable way. Designing Card-based Layouts is easy, but implementing them using Pure CSS has been a pretty tricky endeavor, at least until now. If you've ever tried to build a page with a Card-based Layout like you see here, you will have come across some common and quite infuriating issues caused by the limitations of pre-Flexbox CSS. Right now I have my cards here, they're each articles, and all the cards are wrapped inside a common div, and to position them the way I have right now, I've set a width for each of the articles, then floated them to the left, and then given them each a margin on the right-hand side, and on the bottom, so that they're separated. But when I scroll down, you'll notice several problems…

内容