传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布局 使用弹性布局可以有效的分配一个容器的空间 即使我们的容器元素尺寸改变 它内部的元素也可以调整它的尺寸来适应空间 若想让一个元素变成弹性盒 很简单 display: flex;和display: inline-flex;都可以 设置了flex布局后,子元素的float.clear和vertical…

欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代浏览器指的就是 IE9 及以上的浏览器 2. flex的优势 举个例子:这里我们要实现一个功能,让一个dom元素水平垂直居中; 2.1 传统实现方式(1),居中元素的宽高已知 .box1{ position: relative; backgrou…

CSS3 弹性盒 1.display:flex 说明: 设置为弹性盒(父元素添加) 2.flex-direction(主轴排列方式) 说明: 顺序指定了弹性子元素在父容器中的位置 row 默认在一行内排列 row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面. column:纵向排列. column-reverse:反转纵向排列,从下往上排,最后一项排在最上面 3.justify-content(主轴对齐方式) 说明: 内容对齐(justify-content)属性应用在…

1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ CSS Flexible Box Layout Module Level 1 W3C Candidate Recommendation, 1 March 2016 1 1 1 http://www.runoob.com/css3/css3-flexbox.html CSS3 弹性盒子(Flex Box…

一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕分辨率:指在横纵向上的像素点数,单位是px,1px=1个像素点.一般以纵向像素*横向像素来表示一个手机的分辨率,如1920*1080.(这里的1像素指的是物理设备的1个像素点) 屏幕像素密度:屏幕上每英寸可以显示的像素点的数量,单位是ppi.屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,…

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox…

原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提出解决方案.另外本人2014年5月还废寝忘食的翻译了国外的<CSS3弹性盒模型flexbox完整教程>和<CSS3弹性盒模型flexbox布局实例>,这么好的文章没有人来发现,实在是遗憾. 文章写作背景 查询Can I use上的使用情况,发现最新的浏览器基本支持这个属性,IE10开始…

简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根据布局的需要,调整其中包含的条 目的尺寸和顺序来最好地填充所有可用的空间.当容器的尺寸由于屏幕大小或窗口尺寸发生变化时,其中包含的条目也会被动态地调整.比如当容器尺寸变大时,其 中包含的条目会被拉伸以占满多余的空白空间:当容器尺寸变小时,条目会被缩小以防止超出容器的范围.弹性盒布局是与方向无关的.在…

来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/ Web布局一直个是难点,但貌似现在我们有更好的选择了. 背景 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想…

一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 二.浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀. 属性                    …