CSS3伸缩盒Flexible Box
这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox、Chrome、Safrai等需要加浏览器前缀。
先说说这种布局的特点:
1)移动端由于屏幕宽度都不一样,在布局的时候为了适配,如果用百分比,就得精确计算,而且如果有1px边框,计算会更加复杂难控制
2)如果有多列,要让所有列的高度一样,以前的话需要用各种计算或用子元素撑高等
3)上下居中,如果是在以前,那么用line-height或top绝对定位等计算
4)表单布局的时候,经常是左边和右边在一行上,以往是设置float或position与margin-left组合布局
5)网页有时候要有个底部,放些联系方式友情链接等,这个底部应该永远在下面,即使中间没内容,也不要移上来,以往的话是给中间赋个高等
而现在,用Flexible Box的几个属性就能完成上面的高难度动作。
有一个在线的flexbox小游戏可以玩耍一下,叫做flexboxfroggy。规则很简单,就是将颜色对应的青蛙跟荷叶合在一起。
一、新旧语法
1)几个基础概念
1. flex container(弹性容器),主要设置display为flex或-webkit-flex,那么这个容器中的子元素就是弹性的。
2. flex item(弹性子元素),尺寸可通过普通的width或height,或者使用高级的flex属性,自定义分配空间设置尺寸。
3. main axis(主轴或横轴)和cross axis(侧轴或纵轴),其中属性flex-direction、justify-content、align-items、align-self控制着轴的方向或对齐方式。
4. flex-wrap属性可以控制弹性子元素的换行。
5. 有个order属性,用整数值来定义排列顺序,数值小的排在前面。
2)新旧属性对比
新语法 | |
![]() |
![]() |
旧版部分属性兼容性:
新版部分属性兼容性:
3)新旧属性对应
旧属性 |
新属性 | 定义或对比 |
box-orient:horizontal + box-direction:normal = flex-direction:row box-orient:horizontal + box-direction:reverse = flex-direction:row-reverse box-orient:vertical + box-direction:normal = flex-direction:column box-orient:horizontal + box-direction:reverse = flex-direction:column-reverse |
||
box-flex | flex有3个子属性,而box-flex只能设置一个数字 | |
box-align |
下面会分析align-items和align-content的区别 |
|
box-pack | 效果相同 | |
box-ordinal-group | 效果相同 | |
(实验属性) |
效果相同(Android的UC和微信浏览器没有换行效果) | |
box-flex-group |
设置或检索伸缩盒对象的子元素的所属组 |
|
flex-grow |
flex子属性,设置或检索弹性盒的扩展比率 |
|
flex子属性,设置或检索弹性盒的收缩比率 | ||
flex子属性,设置或检索弹性盒伸缩基准值 | ||
flex-direction与flex-wrap的复合属性,设置或检索弹性盒模型对象的子元素排列方式 | ||
定义flex子项单独在侧轴(纵轴)方向上的对齐方式 |
4)align-content与align-items的区别
先看下面的对比图片,左边是align-content,右边是align-items(在线代码请点击这里,用Chrome打开)
align-content只有在多行的时候才会出现效果,如果只有一行就不会有效果,可以修改在线的代码看效果。此属性与在主轴上对齐方式的justify-content属性类似(Android上的UC和微信浏览器不显示flex-wrap效果)
align-items在多行的时候,两列不是被当成了一个整体,但在一行的时候,效果很好。align-self修改的是父级align-items的效果。
5)子元素空间计算方式
新语法flex,里面包括flex-grow扩展比率、flex-shrink收缩比率和flex-basis起始数值。这两个属性的兼容性不是很好,UC浏览器就不能使用。
分两种情况:
1. 容器的宽度 > 子元素宽度总和,查看在线源码。
容器的宽度设置为500px,flex-basis子元素起始宽度分别50px、80px、100px。
.flex li:nth-child(1) {
flex: 1 1 50px;
background:red;
} .flex li:nth-child(2) {
flex: 2 2 80px;
background:blue;
} .flex li:nth-child(3) {
flex: 3 3 100px;
background:black;
}
先算出剩余空间为270px,用flex-grow来计算。
最终宽度 = flex-grow / flex-grow总和 * 剩余空间 + flex-basis
子元素1 = (1 / (1+2+3)) * 270 + 50= 95
子元素2 = (2 / (1+2+3)) * 270 + 80= 170
子元素3 = (3 / (1+2+3)) * 270 + 100= 235
2. 容器的宽度 < 子元素宽度总和,查看在线源码。
容器的宽度设置为110px,flex-basis子元素的属性和上面相同。
先算出溢出值120px,再根据收缩比率,计算出收缩总和 1*50 + 2*80 + 3*100 = 510px。
最终宽度 ≈ flex-basis - (收缩比率 * flex-basis) / 收缩总和 * 溢出值
子元素1 = 50 - (1*50 / 510) * 120 ≈ 38.23
子元素2 = 80 - (2*80 / 510) * 120 ≈ 42.35
子元素3 = 100 - (3*100 / 510) * 120 ≈ 29.40
6)主轴与侧轴
这两个轴看上去像X、Y坐标,但是有一点不同的就是XY位置是不会变的,X坐标轴不会变成Y坐标轴。
通过 flex-direction 或 box-orient 设置排列方式后,主轴和侧轴的位置也会变了。如下图所示:
在做 justify-content 或 align-items 对齐的时候,要注意参照的轴的位置。
例如我想做个垂直居中的操作,我会设置 align-items:center,在上图中的第一个主轴和侧轴中,可以做到想要的效果。
但是在第二个主轴和侧轴中就会显示水平居中的效果,因为 align-items 是根据侧轴(Cross axis)来对齐的。
7)-webkit-box 与 flex 略有不同
网上很多地方仅仅说这两个只是语法上面的不同,但在实际项目中,碰到过只能用-webkit-box才能达到自己想要的效果。
例如我要在flex布局中实现超出的文本显示省略号,查看在线代码。-webkit-line-clamp这个属性就必须要和-webkit-box结合使用.
.flex {
width: 200px;
display: -webkit-box;
/*display: flex;*/
-webkit-box-orient: vertical;
-webkit-line-clamp:;/*限制在一个块元素显示的文本的行数*/
overflow: hidden;
text-overflow: ellipsis;
}
应该还有其他的不同点,我还没发现。
三、实际应用
1)简单的网格系统
bootstrap2.3.2中有个栅格系统,通过百分比或px与float结合产生栅格效果,并且是响应式的,CSS代码要300多行。
flex布局本来就是响应式的,这样会省掉不少代码,查看在线代码。
2)多列等高
等高的问题在国外叫《Holy Grail Layout》,名称挺高大上的,内容一大堆。
关于等高的技巧,有很多种,可以查看这篇《八种创建等高列布局》,方法各有优缺点,无论哪种但实现起来都需要些代码。
而flex布局,设置display=flex,各个子元素再个设置空间,他们的高度能够自动调整到相同,查看在线源码。
3)绝对底部
在网页上面,有时候底部那栏需要一直贴在下面,例如友情链接这些信息,而如果中间内容没有,就会塌陷上去。
下图中就是在没有内容的时候上来了,虽然可以在内容区域默认设置个高度,但是底部不会正正好贴到屏幕的最下面,除非精确计算。
国外管这个叫《Sticky Footer》
flex布局中只要设置下flex-direction: column方向,再设置下容器的高度与屏幕一样或更高,这样底部的子元素就会一直贴在下面。
查看在线代码。更多的信息可以参考《Solved by Flexbox》,Github地址在这里。还有个flexbugs可以参考参考。
四、注意点
1)多列布局中的column-*属性对弹性子元素无效,这也是一种弹性布局,但是有效的场景比较简单
例如瀑布式照片墙(下图所示),需要弹性的内容只有一个img标签
2)曾经有一个场景(下图所示),Flex布局能够等高,但是当用::after设置了个钩后,会出现::after内容的高度还是原先的,导致了错位。
具体内容可以点击这里查看。
3)float 和 clear 对弹性子元素无效。
4)vertical-align 对弹性子元素的对齐无效
参考资料:
CSS3伸缩盒Flexible Box的更多相关文章
- 伸缩盒 Flexible Box(旧)
box-orient box-pack box-align box-flex box-flex-group box-ordinal-group box-direction box ...
- 伸缩盒 Flexible Box(新)
flex flex-grow flex-shrink flex-basis flex-flow flex-direction flex-wrap align-content ...
- 使用CSS3伸缩盒实现图片垂直居中
用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...
- CSS盒子模型之CSS3可伸缩框属性(Flexible Box)
CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
- 第10章 布局样式相关-伸缩布局(Flexible Box)
伸缩布局(一) CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或 ...
- CSS3 Flexbox(伸缩盒/弹性盒模型)可视化指南
在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布 ...
- CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
- CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
- CSS3 伸缩布局盒模型
CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...
随机推荐
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- 探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密
下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...
- Partition1:新建分区表
未分区的表,只能存储在一个FileGroup中:对Table进行分区后,每一个分区都存储在一个FileGroup,或分布式存储在不同的FileGroup中.对表进行分区的过程,是将逻辑上完整的一个表, ...
- netty5 HTTP协议栈浅析与实践
一.说在前面的话 前段时间,工作上需要做一个针对视频质量的统计分析系统,各端(PC端.移动端和 WEB端)将视频质量数据放在一个 HTTP 请求中上报到服务器,服务器对数据进行解析.分拣后从不同的 ...
- C#异步编程(二)
async和await结构 序 前篇博客异步编程系列(一) 已经介绍了何谓异步编程,这篇主要介绍怎么实现异步编程,主要通过C#5.0引入的async/await来实现. BeginInvoke和End ...
- 从零开始编写自己的C#框架(26)——小结
一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...
- C#发送邮箱
之前自己从来没有做过发送邮箱的功能,前段时间项目需要,在找了很多帖子之后,终于实现了. 之后有整理了一下,写了一个类.直接给类传递信息,就可以发送了. 这里还需要说明的是,发送邮箱需要开通POP3/S ...