FLEX 网格布局及响应式处理

上一篇文章用Flex实现BorderLayout,这一章我们来实现常用的网格布局和响应式处理.

首先我们定义HTML结构,主Box为grid,每项为grid-cell,下面就是我们HTML代码结构.网格布局,我们就实现了.现在不同以往只需要对电脑做好显示效果就可以了,如今社会,智能设备遍地都是.而人们使用智能设备的时间也远远大于PC,智能设备上显示也是重中之重,响应式布局也就出来了.

响应式布局用到的是media这个属性,所以处理起来也是很简单的.我们只需要加入下面的代码:

@media (max-width:768px){   .grid-cell{     flex-basis: 100%;   }}