FLEX 网格布局及响应式处理
上一篇文章用Flex实现BorderLayout,这一章我们来实现常用的网格布局和响应式处理.
首先我们定义HTML结构,主Box为grid,每项为grid-cell,下面就是我们HTML代码结构.
<div class="grid">
<div class="grid-cell">
1
</div>
<div class="grid-cell">
2
</div>
</div>
grid为flex容器,grid-cell为flex项,我们加入CSS代码
.grid{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.grid-cell{
flex-grow:;
flex-shrink:;
padding: 10px;
}
了解过前两篇flex布局文章,代码没什么好解释的了,space-around是为了保证flex项之间的距离相等.grid-cell里设置为等比例的放大或缩小.
在这里,我们在.grid-cell里面加入一个demo盒子,这是为了更好的去控制grid-cell元素,不破坏flex布局的功能性,也就是各自负责各自的事情.为了效果好看,我加入了更多的网格模式.HTML结构,如下
<div class="grid">
<div class="grid-cell">
<div class="demo">1</div>
</div>
<div class="grid-cell">
<div class="demo">2</div>
</div>
</div> <div class="grid">
<div class="grid-cell">
<div class="demo">1</div>
</div>
<div class="grid-cell">
<div class="demo">2</div>
</div> <div class="grid-cell">
<div class="demo">3</div>
</div>
</div> <div class="grid">
<div class="grid-cell">
<div class="demo">1</div>
</div>
<div class="grid-cell">
<div class="demo">2</div>
</div> <div class="grid-cell">
<div class="demo">3</div>
</div> <div class="grid-cell">
<div class="demo">4</div>
</div>
</div>
.grid{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.grid-cell{
flex-grow:;
flex-shrink:;
padding: 10px;
}
.demo{
background-color: #eeeeee;
min-height: 50px;
text-align: center;
width: 100%;;
}
demo里面设定高度和背景色,为了布局能够正确显示出来.
最终效果如下图:
网格布局,我们就实现了.现在不同以往只需要对电脑做好显示效果就可以了,如今社会,智能设备遍地都是.而人们使用智能设备的时间也远远大于PC,智能设备上显示也是重中之重,响应式布局也就出来了.
响应式布局用到的是media这个属性,所以处理起来也是很简单的.我们只需要加入下面的代码:
@media (max-width:768px){
.grid-cell{
flex-basis: 100%;
}
}
就完成了上面网格布局的不同设备显示效果.我们这里是超过768像素的设备就正常显示,如果小于这个值,每个flex项就整行显示.看看效果:
本文属于吴统威的博客,微信公众号:bianchengderen 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=150 ,欢迎大家传播与分享.
FLEX 网格布局及响应式处理的更多相关文章
- html响应式布局,css响应式布局,响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
- 使用ConstraintLayout(约束布局)构建响应式UI
使用ConstraintLayout(约束布局)构建响应式UI 转 https://www.300168.com/yidong/show-2740.html 核心提示:ConstraintLa ...
- 使用栅格系统和flex布局开发响应式页面源码
响应式布局的原理xsmall <576pxsmall >=576pxmedium >=768pxlarge >=992pxxlarge >=1200px 接下来是效果图 ...
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
- [学习笔记]viewport定义,弹性布局,响应式布局
一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-sc ...
- viewport定义,弹性布局,响应式布局及LESS和SASS框架应用
一,移动端宽度设置 viewport视图窗口,<meta name="viewport" content="width=device-width,initial-s ...
- 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
- css布局-响应式布局
响应式设计 .在不同设备上正常使用 .一般主要处理屏幕大小问题 .主要方法: .隐藏 + 折行 + 自适应空间 .rem/viewport/media query 第一个案例 <!DOCTYPE ...
- 自适应布局,响应式布局以及rem,em区别
一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...
随机推荐
- 今天修改bug基本完成
今天修改bug基本完成 在修改bug过程中配到几个郁闷的问题,印象最深的两个1.检查出生日期或日期的合法性,引用的日历控件不能完全保证取到值时操作,现在突然想到或许我该仔细研究日历控件接口,在返回错误 ...
- WebView js 调用Java本地方法
webView = (WebView) this.findViewById(R.id.webview); WebSettings webSettings = webView.getSettings() ...
- qemu kvm 虚拟化
虚拟化: KVM是一个基于Linux内核的虚拟机,属于完全虚拟化.虚拟机监控的实现模型有两类:监控模型(Hypervisor)和宿主机模型(Host-based).由于监控模型需要进行处理器调度,还需 ...
- K - Candies(最短路+差分约束)
题目大意:给N个小屁孩分糖果,每个小屁孩都有一个期望,比如A最多比B多C个,再多了就不行了,会打架的,求N最多比1多几块糖 分析:就是求一个极小极大值...试试看 这里需要用到一个查分约束的东西 下面 ...
- springmvc框架原理分析
第一步:用户发起请求到前端控制器(DispatcherServlet) 第二步:前端控制器请求HandlerMapping查找Handler,可以根据xml配置,注解进行查找 第三步:处理器映射器Ha ...
- CentOS6.5 mini开启网络
1.编辑network配置 vim /etc/sysconfig/network-scripts/ifcfg-eth0 1 2 3 4 5 6 7 DEVICE=eth0 HWADDR=00:0C:2 ...
- python-selenium实现的简易下载器,并常见错误解决
简易下载器的实现 支持代理.失败重试.确保包含指定ID元素(可根据需求自定义修改) # coding: utf-8 from Utils import logging from bs4 import ...
- 数位DP初步 bzoj1026 hdu2089 hdu3555
为了搞SCOI的几道题先做水数位.之前听过课,半懂不懂吧,现在清楚了些. 这类题一般满足区间减法,即只需要我们求出(1,n)即可,然后打表也是为了sovle(DataType)服务.先想好怎么计算,再 ...
- android AppWidgwtProvider学习
实现AppWidgwtProvider: onUpdate() //在达到制定的更新时间之后或者当用户向桌面添加 App Widget时会调用该方法. onDeleted() //当App Wid ...
- [Angular 2] ng-control & ng-control-group
Control: Controls encapsulate the field's value, a states such as if it is valid, dirty or has error ...