由于不需要理会IE浏览器,伸缩盒(flexible box)移动端开发中非常好用! 工作中使用APICLOUD开发手机App,老板要求兼容到安卓2.3(新版的需要安卓4.4以上),所以一直使用的是旧版的flexible box.现在整理一下新旧版本的部分常用属性的相同点和不同点,免得被人问起哑口无言. 相同功能的不同写法: display: -webkit-box; // 旧 display: flex; // 新 // 排列方向 -webkit-box-orient: horizontal |…

在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布局模块,用于实现容器里项目的对齐.方向.排序(即使在项目大小位置.动态生成的情况).flex容器最大的特性在于,能够修改子元素的宽度和高度,以满足在不同尺寸屏幕下的如意分布. 许多设计人员.开发人员发现flexbox布局方式使用简单,定位元素更加简单.复杂的布局更容易用较少的代码实现,大大地简化了开…

用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src="1.png" alt=""> </div> .box{ display: flex; /*容器为伸缩盒*/ align-items: center; /*纵轴方向上的对齐方式设置为居中*/ } img{ width: 100%; } 以上是新版伸缩盒实…

新弹性盒水平垂直居中参考:http://www.cnblogs.com/ooo0/p/7562884.html 新旧弹性盒样式参考:http://www.cnblogs.com/ooo0/p/7562906.html 移动端利用-webkit-box水平垂直居中 -webkit-box的属性:-webkit-box-orient(父):horizontal在水平行中从左向右排列子元素:vertical从上向下垂直排列子元素.-webkit-box-pack(父):start水平居左对齐:end水…

这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的时候为了适配,如果用百分比,就得精确计算,而且如果有1px边框,计算会更加复杂难控制 2)如果有多列,要让所有列的高度一样,以前的话需要用各种计算或用子元素撑高等 3)上下居中,如果是在以前,那么用line-height或top绝对定位等计算 4)表单布局的时候,经常是左边和右边在一行上,以往是设置…

box-orient  box-pack    box-align  box-flex   box-flex-group  box-ordinal-group   box-direction  box-lines (1)box-flex:<number> 注意两点即可 a: 以上所有元素必须结合"display: -webkit-box;"使用, 父类的样式里必须有改属性 b: 父类剩余空间按百分比分配 (2) box-orient: horizontal | vertic…

伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex;    只能控制其子元素 浮动无法影响伸缩容器,但是如果内联伸缩容器 设置了浮动,元素将会以块级伸缩容器显示. 伸缩容器的 margin 与其内容的 margin 不会重叠 项目构建,会将新版语法构建成老板语法 主轴在水平方向时,元素要换行,但是子元素没有 width,此时,使用换轴(父元素加 flex-directio…

1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包括: CSS3新特性 新选择器 边框.背景升级.圆角.阴影 新的盒模型 渐变.动画.2D3D转换 伸缩布局.多列布局 新单位 在线字体图标 前缀应用.浏览器兼容.渐进增强 媒体查询 移动端适配开发方案 响应式布局开发方案 移动端js.触屏事件 zepto.js\bootstrap\iScroll.j…

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛支持并应用时你将会快人一步.如果你想知道它是什么并是如何工作的,不妨仔细了解下吧! 为什么需要伸缩布局盒(Flexbox)? 作者长期以来使用表格.浮动.行内块元素和其他 CSS 属性来布局网站内容.然而,这些并不是为复杂的页面和网页应用而设计的.不管是简单的垂直居中,还是灵活的网格布局都很难靠一己…

Flexbox非常的棒,肯定是未来布局的一种主流.在过去的几年这之中,语法改变了不少,这里有一篇“旧”和“新”新的语法区别教程(如果你对英文不太感兴趣,可以移步阅读中文版本).但是,如果我们把Flexbox新语法.旧语法和中间过渡语法混合在一起使用,我们就可以让浏览器得到完美的展示.尤其是对一个简单的和最可能常见的实例:控制网格顺序. HTML结构 一个具有语义化的容器“page-wrap”,包裹了三个主要区域,并将容器设置为伸缩容器,此时容器中的每外区域自动变成了伸缩项目. <div clas…