FLEX网格布局及响应式处理-创新互联

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

创新互联建站专业网站建设，网站制作与网站建设公司，1800元做网站建设全包，免费赠送网站基础优化服务，让你的网站变得更有价值，公司拥有完善的专业的建站公司流程，能够为企业提供建站服务。使用PHP+MYSQL开发可交付网站源代码;符合网站优化排名的后台管理系统；网站制作收费合理；免费进行网站备案等企业网站建设一条龙服务.

首先我们定义HTML结构,主Box为grid,每项为grid-cell,下面就是我们HTML代码结构.

1

2

grid为flex容器,grid-cell为flex项,我们加入CSS代码

.grid{ display: flex; flex-wrap: wrap; justify-content: space-around; }.grid-cell{ flex-grow: 1; flex-shrink: 1; padding: 10px; }

了解过前两篇flex布局文章,代码没什么好解释的了,space-around是为了保证flex项之间的距离相等.grid-cell里设置为等比例的放大或缩小.

在这里,我们在.grid-cell里面加入一个demo盒子,这是为了更好的去控制grid-cell元素,不破坏flex布局的功能性,也就是各自负责各自的事情.为了效果好看,我加入了更多的网格模式.HTML结构,如下

1

2

1 2 3

1 2 3 4

CSS代码:

.grid{ display: flex; flex-wrap: wrap; justify-content: space-around; }.grid-cell{ flex-grow: 1; flex-shrink: 1; padding: 10px; }.demo{ background-color: #eeeeee; min-height: 50px; text-align: center; width: 100%;; }

demo里面设定高度和背景色,为了布局能够正确显示出来.

最终效果如下图:

FLEX 网格布局及响应式处理
网格布局,我们就实现了.现在不同以往只需要对电脑做好显示效果就可以了,如今社会,智能设备遍地都是.而人们使用智能设备的时间也远远大于PC,智能设备上显示也是重中之重,响应式布局也就出来了.

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

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

就完成了上面网格布局的不同设备显示效果.我们这里是超过768像素的设备就正常显示,如果小于这个值,每个flex项就整行显示.看看效果:

FLEX 网格布局及响应式处理

本文属于吴统威的博客,微信公众号:bianchengderen 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=150 ,欢迎大家传播与分享.

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：FLEX网格布局及响应式处理-创新互联
分享网址：http://scyanting.com/article/epshi.html

其他资讯