位置:首页 > 前端

Flex响应式卡片布局

2016-01-18

在近期一个产品的改版中尝试用了Flex,手痒抽空自己用Flex做了个响应式的卡片布局Demo。

Demo主要做了以下几点: 

1、Flex布局:

Flex学习传送:http://www.w3cplus.com/css3/a-guide-to-flexbox-new.html

Flex确实很方便,在不改变之前卡片式DOM结构的情况下,纯CSS同行等高很好做(不用指定item高度,也不用js计算)。

2、响应式:

Media Queries快捷解决多设备显示适应问题。

3、焦点交互:

标题变色,图片放大,边框消失,增加阴影。在我看来有点杂了,感觉增加个阴影就够了。

See the Pen Flex响应式卡片式布局 by Pamela (@pamelacode) on CodePen.