上一篇文章用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: 1; flex-shrink: 1; 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: 1; flex-shrink: 1; 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 ,欢迎大家传播与分享.
相关推荐
响应式网格商品展示及加入购物车界面布局。该网格布局界面使用flexbox来制作商品的网格布局。通过每个商品面板右上角的“+”号可以将该商品添加到比较列表中,最多可以添加3个比较商品。在比较界面会以三列展示出...
网格布局 网格布局 显式网格属性 隐式网格属性 网格布局术语 网格布局应用 工程化 静态资源 字体文件(WebFont or Assets) Sprite 预编译 Less Sass CoffeScript 样式方案 css modules stylus css-nano postcss css...
CSS的响应式网格布局带有浮动右侧菜单的自适应网格布局,隐藏在esc键上使用CSS Flex属性的导航布局使用CSS Grid属性的内容布局
一个轻量级的布局库,用于构建可在任何地方工作的出色的响应式移动优先UI。 开源,使用CSS Grid和Flexbox构建。 在下载单个CSS文件。 文献资料 在此处查看。 变更日志 查看以查看有关更新和改进的详细信息。 扩展...
盒子模型(W3C模型、怪异模型),选择器,em/px/rem/vh/vw, 回流与重绘,BFC,flex 弹性布局,Grid 网格布局,响应式设计,隐藏页面元素,布局水平居中,文本水平居中,单行多行文本显示,画三角形,Css 性能优化
Easy-Layouts-with-Flexbox Flexbox(或Flexible Box)布局模型是一组CSS 属性,允许高效创建健壮的多屏幕应用程序布局。 Flexbox 使用双轴容器/项目布局... 它还可以极大地简化依赖于常见复杂网格模型的响应式布局。
Gridflex gridflex.css是带有Display flex的轻型,响应式Grid布局。 入门 在您的项目中开始使用gridflex。 您可以手动安装或使用NPM。 手动安装 下载已编译并或。 使用CDN安装 ...$ npm install gridflex --save ...
使用显示网格而不是flex添加卡片部分 有一个“ Data.js”文件,我可以导入内容,而不是对每个组件中的所有内容进行硬编码 目标 创建一个响应式且有吸引力的单页应用程序 创建具有更好编码实践的可重用组件 改善我CSS...
但是,在flexbox可以让您非常灵活地控制单个元素在flex容器中如何拉伸,收缩和行为的情况下,网格更加强调设置容器本身的规则,通过将它们对齐以自动处理元素的拉伸和收缩行和列。 Grid设计用于在两个方向上显示...
但是,在flexbox可以让您非常灵活地控制单个元素在flex容器中如何拉伸,收缩和行为的情况下,网格更加强调设置容器本身的规则,通过将它们对齐以自动处理元素的拉伸和收缩行和列。 Grid设计用于在两个方向上显示...
但是,在flexbox可以让您非常灵活地控制单个元素在flex容器中如何拉伸,收缩和行为的情况下,网格更加强调设置容器本身的规则,通过将它们对齐以自动处理元素的拉伸和收缩行和列。 Grid设计用于在两个方向上显示...
响应式布局 Flex布局 网格布局 CSS动画 Java脚本 基本语法 基本类型 Javascript对象 原型和继承 作用域 闭包 这 ES6 + 单线程与异步Javascript DOM / BOM API 前端基础知识 浏览器 浏览器DOM事件流/事件委托 浏览器...
图书馆应用由M.Bambalan 使用的技术: 菲格玛HTML5 CSS3 移动响应式布局Flex和网格布局动画和转场FontAwesome-萨斯变数套料香草Javascript Javascript模块本地存储欺诈开发者的反思我意识到制作此应用程序将证明我的...
SCSS大师班 (S)CSS 布局大师班:Flexbox & Grid 弹性盒: flex-direction 命令 证明内容 对齐项目 自我对齐 柔性包装 对齐内容 ...响应式混合 克隆: https://wonhundred.com/
该网站包含 Udacity HTML 和 CSS 课程中涵盖的概念,包括 Flex、网格和响应式布局。 这个博客网站是本课程的最终提交。 它有 css 文件、html 文件和图像三个文件夹。 我使用 Visual Studio 和 git 编写代码并提交到 ...
网格和Flex中的响应式布局 与您的好友一起工作。 创建一个基本的网站布局,并使其与grid和flex响应。 当您拉伸和压缩浏览器窗口时,它应该会自动正确调整自身大小。 就像 要进行测试->检查并选择另一台设备,则...
CSS布局3 网格和Flex中的响应式布局与您的好友一起工作。 创建一个基本的网站布局,并使其与grid和flex响应。 当您拉伸和压缩浏览器窗口时,它应该会自动正确调整自身大小。 就像要进行测试->检查并选择另一台设备,...
项目2信息网站“学会学习” 该项目不是响应式(!... 使用flex和网格布局构建网格。 使用了关键帧和动画。 改善计划: 使网站具有响应能力以及连接其他字体检查代码是否与跨浏览器兼容,并添加所有供应商前缀
网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12...
抛球帆布canvas手写签名svg svg画曲线svg画柱形图svg画折线图svg画饼图svg画雷达图svg画环形图svg绘画十年转盘抽奖埃哈特echarts的调整大小和配置ng注解使用响应式表单时间选择器块加载容器倒计时指令权限指令管道...