CSS3弹性伸缩布局之box布局


Posted in HTML / CSS onJuly 12, 2016

CSS3弹性伸缩布局简介

2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段,并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局,所以本次主要讲解一下旧版本和新版本在移动端使用的各个知识点,让大家对神秘的flex布局熟悉起来。

旧版本(box)

首先看一下浏览器兼容情况:

CSS3弹性伸缩布局之box布局

PS:浏览器兼容数据不一定很准确,不过相差不大。

下面将通过一个简单的实例来讲解旧版本的各个属性:

html代码:

XML/HTML Code复制内容到剪贴板
  1. <div>  
  2.     <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨空给</p>  
  3.     <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨</p>  
  4.     <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>  
  5. </div>  

可以看到我们这个例子是很简单的,一个div元素内包含三个p元素,它们都是块元素(block)。接下来给段落加一些基础的样式:

CSS Code复制内容到剪贴板
  1. p{   
  2.     width:150px;   
  3.     border:3px solid lightblue;   
  4.     background:lightgreen;   
  5.     padding:5px;   
  6.     margin:5px;   
  7. }  

此时刷新网页看到的结果是这样的:

CSS3弹性伸缩布局之box布局

这个结果很正常吧!OK,现在我们给div元素设置为box,看看有什么变化:

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     display:-webkit-box;   
  3.     display:box;   
  4. }  

我们再次刷新网页,结果是这样的:

CSS3弹性伸缩布局之box布局

看到了吧,现在每一个p元素都变成一个box了,这就是弹性布局的神奇所在!

在上面中,我们将div元素的display设置为box,这就是旧版本的弹性布局。对于比较旧的浏览器版本,我们需要加上-webkit-前缀。

旧版本的弹性布局有两个属性值:

box : 将容器盒模型作为块级弹性伸缩盒显示 inline-box : 将容器盒模型作为内联级弹性伸缩盒显示

PS:我们知道块级它是占用整行的,比如div元素;而内联级不占用整行,比如span元素。但是我们设置了整个盒子,他们都不占用,保持一致。就像我们上面的例子一样,给div元素设置了盒子,那么div元素里面的p元素就不占用了。

下面介绍旧版本弹性布局的各个属性:

box-orient 属性

box-orient属性主要实现盒子内部元素的流动方向。

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     display:-webkit-box;   
  3.     display:box;   
  4.     -webkit-box-orient:vertical;   
  5.     box-orient:vertical;   
  6. }  

此时的结果就是垂直排列:

CSS3弹性伸缩布局之box布局

此属性的属性值有:

horizontal : 伸缩项目从左到右水平排列 vertical : 伸缩项目从上到下垂直排列inline-axis : 伸缩项目沿着内联轴排列显示block-axis : 伸缩项目沿着块轴排列显示

大家不妨试一下:horizontal 和 inline-axis 都是水平排列,而vertical 和 block-axis 都是垂直排列。

box-direction属性

box-direction 属性主要是设置伸缩容器中的流动顺序。

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     display:-webkit-box;   
  3.     display:box;   
  4.     -webkit-box-direction:reverse;   
  5.     box-direction:reverse;   
  6. }  

这样我们的排序就是反序的了,运行结果为:

CSS3弹性伸缩布局之box布局

此属性的属性值有:

normal : 正常顺序,默认值 reverse : 反序

box-pack属性

box-pack 属性用于伸缩项目的分布方式。

此属性的属性值有:

start : 伸缩项目以起始点靠齐 end : 伸缩项目以结束点靠齐 center : 伸缩项目以中心点靠齐 justify : 伸缩项目平局分布

下面我们都试一下各个属性值的效果:

1.start属性值

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     -webkit-box-pack:start;   
  3.     box-pack:start;   
  4. }  

这个就是默认靠齐方式:

CSS3弹性伸缩布局之box布局

2.end属性值

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     -webkit-box-pack:   
  3. end   
  4. ;   
  5.     box-pack:   
  6. end   
  7. ;   
  8. }  

这个就是以结束点靠齐:

CSS3弹性伸缩布局之box布局

3.center属性值

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     -webkit-box-pack:   
  3. center   
  4. ;   
  5.     box-pack:   
  6. center   
  7. ;   
  8. }  

这就是居中对齐效果:

CSS3弹性伸缩布局之box布局

4.justify属性值

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     -webkit-box-pack:   
  3. justify   
  4. ;   
  5.     box-pack:   
  6. justify   
  7. ;   
  8. }  

这个就是平均分布效果:

CSS3弹性伸缩布局之box布局

PS:垂直方向上也是一样的原理,但如果height为auto的话,效果将出不来。所以需要给height设置一个定高(最好比默认情况高)。这时,就能看到在垂直方向上的效果了。这里我就不再赘述了。

box-align属性

box-align 属性用来处理伸缩容器的额外空间。

此属性的属性值有:

start : 伸缩项目以顶部为基准,清理下部额外空间 end : 伸缩项目以底部为基准,清理上部额外空间 center : 伸缩项目以中部为基准,平均清理上下部额外空间baseline : 伸缩项目以基线为基准,清理额外的空间stretch : 伸缩项目填充整个容器,默认值

同样的,我们将试一下每个属性值的效果:

1.start属性值

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     display:-webkit-box;   
  3.     display:box;   
  4.     -webkit-box-align:start;   
  5.     box-align:start;   
  6. }  

效果如下:

CSS3弹性伸缩布局之box布局

2.end属性值

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     display:-webkit-box;   
  3.     display:box;   
  4.     -webkit-box-align:   
  5. end   
  6. ;   
  7.     box-align:   
  8. end   
  9. ;   
  10. }  

效果如下:

CSS3弹性伸缩布局之box布局

3.center属性值

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     display:-webkit-box;   
  3.     display:box;   
  4.     -webkit-box-align:   
  5. center   
  6. ;   
  7.     box-align:   
  8. center   
  9. ;   
  10. }  

效果如下:

CSS3弹性伸缩布局之box布局

4.baseline属性值

如果box-orient是内嵌单轴或横向,所有的子元素都置于他们的基线对齐。

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     display:-webkit-box;   
  3.     display:box;   
  4.     -webkit-box-orient:horizontal;   
  5.     box-orient:horizontal;   
  6.     -webkit-box-align:baseline;   
  7.     box-align:baseline;   
  8. }   

效果如下:

CSS3弹性伸缩布局之box布局

而如果box-orient是块轴或者垂直方向的,那么所有的子元素都将居中垂直排列。

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     display:-webkit-box;   
  3.     display:box;   
  4.     -webkit-box-orient:   
  5. vertical   
  6. ;   
  7.     box-orient:vertical;   
  8.     -webkit-box-align:baseline;   
  9.     box-align:baseline;   
  10. }  

效果如下:

CSS3弹性伸缩布局之box布局

5.stretch属性值

所有子元素拉伸以填充包含区块。

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     display:-webkit-box;   
  3.     display:box;   
  4.     -webkit-box-align:   
  5. stretch   
  6. ;   
  7.     box-align:   
  8. stretch   
  9. ;   
  10. }  

效果如下:

CSS3弹性伸缩布局之box布局

box-flex属性

box-flex 属性可以使用浮点数分配伸缩项目的比例。此属性是给容器内的项目设置的,它们会基于父容器的宽度来分配它们所占的比例:

XML/HTML Code复制内容到剪贴板
  1. p:nth-child(1){   
  2.     -webkit-box-flex:1;   
  3.     box-flex:1;   
  4. }   
  5. p:nth-child(2){   
  6.     -webkit-box-flex:3;   
  7.     box-flex:3;   
  8. }   
  9. p:nth-child(3){   
  10.     -webkit-box-flex:1;   
  11.     box-flex:1;   
  12. }  

效果如下:

CSS3弹性伸缩布局之box布局

当然也可以有些项目是固定宽度的,那么其他的项目也会分配剩余的宽度,比如这里第一个p元素设置为固定宽度:

XML/HTML Code复制内容到剪贴板
  1. p:nth-child(2){   
  2.     -webkit-box-flex:2;   
  3.     box-flex:2;   
  4. }   
  5. p:nth-child(3){   
  6.     -webkit-box-flex:1;   
  7.     box-flex:1;   
  8. }  

效果如下:

CSS3弹性伸缩布局之box布局

更多使用情况,大家可以自己慢慢去尝试。

box-ordinal-group 属性

box-ordinal-group 属性可以设置伸缩项目的显示位置。

XML/HTML Code复制内容到剪贴板
  1. p:nth-child(1){   
  2.     -webkit-box-ordinal-group:2;   
  3.     box-ordinal-group:2;   
  4. }   
  5. p:nth-child(2){   
  6.     -webkit-box-ordinal-group:3;   
  7.     box-ordinal-group:3;   
  8. }   
  9. p:nth-child(3){   
  10.     -webkit-box-ordinal-group:1;   
  11.     box-ordinal-group:1;   
  12. }  

效果如下:

CSS3弹性伸缩布局之box布局

可以看到:第一个p元素排在了第二,第二个p元素排在了第三,第三个p元素排在了第一。可以单独给某一个p元素设置此属性,其他项目会按照原来的顺序做变动。

OK,那么旧版本的所有属性就简单的介绍完了,更多结合的用法还是根据需要自己多动手去练习一下。

这里举一个水平垂直居中的例子:

XML/HTML Code复制内容到剪贴板
  1. div{   
  2.     display:-webkit-box;   
  3.     display:box;   
  4.     height:500px;   
  5.     border:1px solid #f00;   
  6.     -webkit-box-pack:center;   
  7.     box-pack:center;   
  8.     -webkit-box-align:center;   
  9.     box-align:center;   
  10. }  

那么效果就是这样的了:

CSS3弹性伸缩布局之box布局

此时我们再给p元素设置一个固定的高度:

XML/HTML Code复制内容到剪贴板
  1. p{   
  2.     width:150px;   
  3.     height:200px;   
  4. }  

那么这时的效果就是:

CSS3弹性伸缩布局之box布局

是不是很轻松就实现了这种效果呢!

小结

好的,到这里旧版本的弹性布局基础知识点就都介绍了一下。由于篇幅过长,怕大家看着疲劳,新版本的弹性布局(flex)我将放在下一篇介绍。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

原文出处:http://www.cnblogs.com/jr1993/p/4751410.html

HTML / CSS 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 #HTML / CSS
使用css3绘制出各种几何图形
Aug 17 #HTML / CSS
利用CSS3实现自定义滚动条代码分享
Aug 18 #HTML / CSS
纯CSS3实现图片无间断轮播效果
Aug 25 #HTML / CSS
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 #HTML / CSS
CSS3实现跳动的动画效果
Sep 12 #HTML / CSS
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 #HTML / CSS
You might like
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
目录,文件操作详谈―PHP
2006/11/25 PHP
php多文件上传实现代码
2014/02/20 PHP
php简单smarty入门程序实例
2015/06/11 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
程序员机试试题汇总
2012/03/07 面试题
化学系大学生自荐信范文
2014/03/01 职场文书
主管会计岗位职责
2014/03/13 职场文书
副总经理任命书
2014/06/05 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python