使用 CSS3 Flexible Boxes 布局
本博客同步自我的Github博客
Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出,这是在原有的大家非常熟悉的block
, inline-block
, inline
的基础上延伸出的新一代布局模式。
浏览器兼容性
作为非常现实的开发者,是否对一个新技术进行关注,首先要考虑它的浏览器兼容性如何。我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的。
可以看到,现代浏览器基本上都支持了,IE10开始也支持了(IE和Safari分别加-ms-
和-webkit-
前缀即可),移动端的支持情况也比较良好,唯一不支持的平台只有Opera了,咱不带他玩→_→
因此,奥巴马同志说:伸缩盒模型是好的,有前途的。(嗯嗯~)
伸缩盒基本概念
伸缩盒的最大特点或者说优点就在于它考虑到了现今高昂的房价和人民日益增长的住宅需求之间的矛盾,房屋面积是有限的,但是我们的伸缩盒能够最合理最高效地把房子分给大家。面积多了,就给大家伙多分点;面积小了,就让各位挤一挤少分点,总而言之不会让任何一个人露宿街头的(overflow)!
既然我们提到了房子和住户的关系,那么住户的排列自然需要沿一定的方向。对于块级元素来说,布局的延伸方向是自上而下的,也就是纵向。而对于行内元素来说,布局延伸方向是自左往右的,也就是横向。而伸缩盒呢,它的方向是可变的,既能纵向延伸,也能横向舒展,这取决于你的设置了。
伸缩盒模型基本术语
伸缩盒模型的思想和普通的块级元素和行内元素的布局思想有较大的不同,它引入了一些新的概念和术语,通过下面这张图来了解一下:
Flex container 伸缩盒容器
这就是用来分的房子,这是一间神奇的房子,要让它变得神奇,将display
属性声明为flex
或inline-flex
即可~
Flex item 伸缩项
房子里的居民,他们都会占有自己应得的住房面积。
为了形象说明,我们用代码来解释。
<div class="container"><div class="item item-1">item 1</div><div class="item item-2">item 2</div><div class="item item-3">item 3</div>
</div>
CSS设置为:
.container {display: flex;width: 300px;height: 100px;...
}
在这里display: inline-flex;
好像也可以。
对于其中的伸缩项元素,我们需要给他们事先安排好住房面积比例,我们就用最简单最健康的1:1:1吧~我们将比例声明在flex
属性里
.item-1 {flex: 1;...
}
.item-2 {flex: 1;...
}
.item-3 {flex: 1;...
}
Voilà!
我们的大房子被完美地平分成三个隔间了,三家平分房租!
如果有人想住大点的房子,我们直接改变flex
的比例即可:
.item-1 {flex: 1;...
}
.item-2 {flex: 1;...
}
.item-3 {flex: 2;...
}
是不是很方便?
Axes 轴
我们可以看到,图中有两条轴,分别标注了主轴和次轴(垂直于主轴)。然而实际上哪一条是主轴并不确定,是由我们来规定的。
flex-direction
此属性规定哪条轴为主轴。justify-content
此属性设置了伸缩项在主轴方向上的排列方式,这个稍后解释。align-items
此属性和上面的justify-content
相对,表示伸缩项在次轴上的排列方式。align-self
此属性规定某一个特定的伸缩项元素在次轴上的布局方式,在某个元素上设置该属性会覆盖它的align-items
属性。也就是这个属性会让某个元素更有个性,不走寻常路~
flex-direction
当我们不想沿着默认的方向分房子的时候,我们可以改变flex-direction
属性的值来改变主轴和方向,该属性默认的取值为row;
.container {flex: row-reverse;...
}
顾名思义,这会让伸缩项的排列方向反过来:
当此属性设置为column
时,主次轴就会对调,元素的排列方向也会随之改变:
.container {flex-direction: column;...
}
至于flex: column-reverse
的含义就不用我多说了吧~
justify-contents
有的时候,大家挨着住,一点空隙都没有也会很难受,连个过道都没有,隐私也不能保证对吧。这个时候,我们可以改变分配政策了,不再按比例分配,而是定额分配,每个人的面积是确定的。多出的房屋面积改成公共区域。
.item {width: 80px;...
}
...
设定了width
属性后也要记得去掉flex
属性的声明哦,不然flex
属性的效果仍然会把width
覆盖掉~
同时,如果width
属性也不设定的话,元素宽度会表现为内容的宽度,which means 当伸缩项内部无内容时,将不会进行渲染,其表现就和display: none;
一样。
这时,在容器上声明justify-content
属性就可以安排伸缩项的位置了:
.content {justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items
这项属性会改变次轴上元素排列的方式,对于本例来说原来次轴方向上元素的高度是表现为height: 100%;
的,设定了align-items
属性后,其高度表现就会发生改变了。
.content {align-items: flex-start | flex-end | center | baseline | stretch;
}
说到这里了,伸缩项具体的表现其实可以想象出来了,想象不出来的就自己动手试一试吧~
order
在伸缩项上声明此属性,可以无视HTML结构的顺序而按照order
从小到大的顺序沿flex-direction
方向排列。比如:
.item-1 {order: 3;...
}
.item-2 {order: 1;...
}
.item-3 {order: 2;...
}
flex-wrap
此属性的默认值为nowrap
,也就是忽略伸缩项的宽度,管你要多少住房面积,通通按照flex
属性说好的分配,不许换行。
.container {flex-wrap: nowrap | wrap | wrap-reverse
}.item {width: 150px;
}
flex-grow,flex-shrink 和 flex-basis
上文提到的flex
属性实际上是这三个属性的简写形式。这三个属性有相似性,都是表示项与项之间分配空间的相对比例关系,不同之处在于:
flex-grow
属性:属性值为该伸缩项所占空间相对于其他伸缩项(声明了flex
相关属性的项)的比值。flex-shrink
属性:该伸缩项相对于其他伸缩项缩小的比值,也就是说当flex-shrink: 3;
时,该项所占空间为其他项的1/3。flex-basis
属性:属性值为该项所占空间占容器空间的百分比。
注意:对于flex-basis
属性,当所有项的属性值相加<=100%时,会严格按照百分比值来渲染。当属性值相加>100%时,元素并不会溢出,而是表现为两两之间所占空间大小遵循相互的百分比比值。也就是说当存在三个伸缩项且flex-basis
值都为50%
时,表现行为与三个项均为flex: 1;
一样。
Flexible Boxes布局模式在响应式开发中尤其好用,对不同的终端,设置元素之间的空间分配关系将会变成一件非常简单的事。伸缩盒布局和响应式布局中流行的流体布局哪种更好,还是可以结合起来,就看各位开发者发挥自己的聪明才智了!
PS: 最后感谢SF上一位网友52lidan提供的demo,各位可以看他的jsfiddle,DEMO
参考文献
- http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/
- https://developer.mozilla.org/en-US/docs/Web/CSS/flex
- http://www.zhangxinxu.com/wordpress/?p=1338
转载于:https://www.cnblogs.com/classicemi/p/4016005.html
使用 CSS3 Flexible Boxes 布局相关推荐
- CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
- html弹性盒子垂直排列,css3弹性盒子布局
css3弹性盒子布局 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒布局模型的目的是 ...
- CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法...
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- html5/css3响应式布局介绍
转载链接:http://www.51xuediannao.com/html+css/htmlcssjq/694.html html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流 ...
- CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
- 浅谈CSS3 响应式布局--Media Queries
CSS3 Media Queries , CSS3媒体查询.使用 @media 查询,你可以针对不同的媒体类型定义不同的样式:也可以针对不同的屏幕尺寸设置不同的样式:当重置浏览器大小的过程中,页面也会 ...
- CSS3 多列布局的跨列
默认情况下,多列容器中的内容,会一列一列地自动填充.但有时候,却需要其中的某些内容(如,文章标题)不是多列布局,而是横跨所有列. 要实现类似报纸.杂志上的跨列效果,就可以使用 column-span属 ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
最新文章
- python中str和repr_python中str()和repr()函数的区别
- MsChart5 累计柱状图 分类统计
- AndroidStudio中获得的VersionCode一直为1和VersionName一直为1.0
- String、StringBuffer和StringBuilder
- PHP DeepL翻译API
- 台式计算机怎么关闭无线网络,台式机无线网卡被禁用了如何解决
- 剧情插件Cutscene Creator uSequencer 1.3.7.1使用说明一
- java 集合底层_java集合底层实现总结
- 汇编语言期末复习不挂科——知识点总结
- 基于mongoose的httpclient配置SSL与cookie
- 郭德纲最新相声:韩国学艺
- 认识黑客常用的入侵方法
- Android消息提醒
- 电子行业数字工厂管理系统有哪些优点和不足
- 应用示例:图像文字识别
- Excel 重复格式检验高亮为空不展示,15位不生效问题,手机号格式
- 12.4 C++常引用
- KiCad 6 版本体验记录
- Python之禅 -- 致初学者
- matlab矩阵画柱状三维,[原创]利用MATLAB绘制三维彩色柱状图
热门文章
- document的createElement方法创建具有指定标签的DOM对象
- ibatis 批量插入
- MYSQL 联表查询 ORDER 效率低?
- query判断值是否为空,针对前台提交数据的校验
- 清空表中数据 id从1开始
- C#设置System.Net.ServicePointManager.DefaultConnectionLimit,突破Http协议的并发连接数限制...
- 如何更好的与人沟通?[图]
- Struts 声明式异常处理和个性化异常处理(转)
- 阿里云文件存储NAS跨账号挂载
- MSSQL · 最佳实践 · 使用混合密钥实现列加密