CSS3弹性伸缩布局(一)——box布局

CSS3弹性伸缩布局简介

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

旧版本（box）

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

$1EZQ9IENP7}1HCH8DQ_KWA

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

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

html代码：

<div><p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p><p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p><p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

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

p{width:150px;border:3px solid lightblue;background:lightgreen;padding:5px;margin:5px;
}

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

3%`JU`~CGTEYZXCUR7[E`Z6

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

div{display:-webkit-box;display:box;
}

我们再次刷新网页，结果是这样的：

_0%FOA8C$VGLAYR_4T}H[8C

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

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

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

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

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

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

box-orient 属性

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

div{display:-webkit-box;display:box;-webkit-box-orient:vertical;box-orient:vertical;
}

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

KO$O4RM%C_DK3RL6{4NS`D6

此属性的属性值有：

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

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

box-direction属性

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

div{display:-webkit-box;display:box;-webkit-box-direction:reverse;box-direction:reverse;
}

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

`29$SHXQF0L(9X7921XJ2MJ

此属性的属性值有：

  • normal  : 正常顺序，默认值
  • reverse : 反序

box-pack属性

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

此属性的属性值有：

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

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

1.start属性值

div{-webkit-box-pack:start;box-pack:start;
}

这个就是默认靠齐方式：

_0FOA8CVGLAYR_4TH8C

2.end属性值

div{-webkit-box-pack:
end 
;box-pack:
end 
;
}

这个就是以结束点靠齐：

I(AW2DG@H(1S78}A10O47S8

3.center属性值

div{-webkit-box-pack:
center 
;box-pack:
center 
;
}

这就是居中对齐效果：

CPL1~K0}U_2@U%5QQC2NDJE

4.justify属性值

div{-webkit-box-pack:
justify 
;box-pack:
justify 
;
}

这个就是平均分布效果：

PPM48@VCKY3SC@)ETF`YB87

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

box-align属性

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

此属性的属性值有：

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

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

1.start属性值

div{display:-webkit-box;display:box;-webkit-box-align:start;box-align:start;
}

效果如下：

BBZ9PGG5X%$JR~1`4ZX5C{P

2.end属性值

div{display:-webkit-box;display:box;-webkit-box-align:
end 
;box-align:
end 
;
}

效果如下：

3TTD)TX5TN{​{U@`G~P6]60E

3.center属性值

div{display:-webkit-box;display:box;-webkit-box-align:
center 
;box-align:
center 
;
}

效果如下：

(@PD~VFPSGZ_WZEWG~U2$G5

4.baseline属性值

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

div{display:-webkit-box;display:box;-webkit-box-orient:horizontal;box-orient:horizontal;-webkit-box-align:baseline;box-align:baseline;
}

效果如下：

BBZ9PGG5X%$JR~1`4ZX5C{P

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

div{display:-webkit-box;display:box;-webkit-box-orient:
vertical 
;box-orient:vertical;-webkit-box-align:baseline;box-align:baseline;
}

效果如下：

]6MTV[ER[6RJ$I}JC6Q5SP6

5.stretch属性值

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

div{display:-webkit-box;display:box;-webkit-box-align:
stretch 
;box-align:
stretch 
;
}

效果如下：

_0FOA8CVGLAYR_4TH8C

box-flex属性

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

p:nth-child(1){-webkit-box-flex:1;box-flex:1;
}
p:nth-child(2){-webkit-box-flex:3;box-flex:3;
}
p:nth-child(3){-webkit-box-flex:1;box-flex:1;
}

效果如下：

}GF4AT{PJ_HG0OGW~58J}}G

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

p:nth-child(2){-webkit-box-flex:2;box-flex:2;
}
p:nth-child(3){-webkit-box-flex:1;box-flex:1;
}

效果如下：

]R]G@J893O]@7PL@@%[%2YA

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

box-ordinal-group 属性

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

p:nth-child(1){-webkit-box-ordinal-group:2;box-ordinal-group:2;
}
p:nth-child(2){-webkit-box-ordinal-group:3;box-ordinal-group:3;
}
p:nth-child(3){-webkit-box-ordinal-group:1;box-ordinal-group:1;
}

效果如下：

2NH4LK6]XRV[C[V6NDKACDT

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

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

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

div{display:-webkit-box;display:box;height:500px;border:1px solid #f00;-webkit-box-pack:center;box-pack:center;-webkit-box-align:center;box-align:center;
}

那么效果就是这样的了：

OV@IL0C)V)@ZSW3CI2~P7LO

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

p{width:150px;height:200px;
}

那么这时的效果就是：

8%QHR3YLPZ~328YIF8L)3$B

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

小结

好的，到这里旧版本的弹性布局基础知识点就都介绍了一下。由于篇幅过长，怕大家看着疲劳，新版本的弹性布局（flex）我将放在下一篇博客介绍。希望能帮到大家，同时尽请关注！

 

若需转载，请注明出处，谢谢合作！

转载于:https://www.cnblogs.com/jr1993/p/4751410.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/290615.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Avalonia跨平台入门第十五篇之ListBox聊天窗口

Avalonia跨平台入门第十五篇之ListBox聊天窗口

在前面分享的几篇中咱已经玩耍了Popup、ListBox多选、Grid动态分、RadioButton模板、控件的拖放效果、控件的置顶和置底、控件的锁定、自定义Window样式、动画效果、Expander控件、ListBox折叠列表;今天趁着大周末的时间接着去摸索基于ListBox的聊天窗口的效果,最终实现的效果如…
阅读更多...
《Unity着色器和屏幕特效开发秘笈（原书第2版）》一2.9　打包和混合纹理

《Unity着色器和屏幕特效开发秘笈（原书第2版）》一2.9　打包和混合纹理

本节书摘来自华章出版社《Unity着色器和屏幕特效开发秘笈&#xff08;原书第2版&#xff09;》一书中的第2章&#xff0c;第2.9节&#xff0c;作者 [英]艾伦朱科尼&#xff08;Alan Zucconi&#xff09; [美]肯尼斯拉默斯&#xff08;Kenneth Lammers&#xff09;&#xff0c;更…
阅读更多...
云计算及应用课程知识整理

云计算及应用课程知识整理

文章目录一、云计算云计算概念云计算的服务类型云计算技术体系结构的层次及其功能为什么云计算成本低&#xff1f;二、GFS分布式的文件系统设计需要考虑哪些问题&#xff1f;GFS架构GFS容错机制三、分布式数据处理MapReducemapReduce概念MapReduce适合什么类型数据&#xff1f;…
阅读更多...
Android loading进度条使用简单总结

Android loading进度条使用简单总结

在这里&#xff0c;总结一下loading进度条的使用简单总结一下。 一、说起进度条&#xff0c;必须说说条形进度条&#xff0c;经常都会使用到嘛&#xff0c;特别是下载文件进度等等&#xff0c;还有像腾讯QQ安装进度条一样&#xff0c;有个进度总给人良好的用户体验。 先来找图看…
阅读更多...
sublime php语法检查

sublime php语法检查

安装sublimelinter 安装sublimelinter-php 设置sublimelinter 进入SublimeLinter文件夹改动 SublimeLinter.sublime-settings文件 设置php文件夹
阅读更多...
lv13 环境搭建SD卡启动

lv13 环境搭建SD卡启动

一、制作SD卡启动盘 1.1 方法1&#xff1a;在Linux下制作 一、准备好烧录脚本 cd ~/fs4412 ​ unzip sdfuse_q.zip ​ cd sdfuse_q ​ chmod x *.sh 二、将SD卡插入USB读卡器&#xff0c;并连接到虚拟机 或者 一般识别的sd卡会在dev目录下显示sdb 三、烧录 cp ../u-boot-f…
阅读更多...
如何使用c#编写单片机程序

如何使用c#编写单片机程序

因为个人喜爱想研究单片机&#xff0c;但是不太会c&#xff0c;然后再找资料研究有没有其他的方法发现国外的c# nanoframework 框架可以编写单片机程序&#xff0c;本文我将会用自己踩过的坑来总结一些c#编写单片机的一些经验&#xff0c;希望帮到热爱c#的xd 首先第一步我们需要…
阅读更多...
机器学习与数据挖掘——第二章 数据与数据预处理

机器学习与数据挖掘——第二章 数据与数据预处理

一、关于数据 什么是数据&#xff1f; 数据是数据对象的集合及其属性 属性的类型 标称标度 nominal scale 标称属性的值是一些符号或实物的名称&#xff0c;每个值代表某种类别、编码或状态&#xff0c;所以标称属性又被看做是分类型的属性&#xff08;categorical&#xff…
阅读更多...
《 线性代数及其应用 （原书第4版）》——1.2 行化简与阶梯形矩阵

《 线性代数及其应用 （原书第4版）》——1.2 行化简与阶梯形矩阵

本节书摘来自华章出版社《 线性代数及其应用 &#xff08;原书第4版&#xff09;》一书中的第1章&#xff0c;第1.2节&#xff0c;作者:&#xff08;美&#xff09;戴维C. 雷&#xff08;David C. Lay&#xff09;马里兰大学帕克学院 著刘深泉 张万芹 陈玉珍 包乐娥 陆 博 译&a…
阅读更多...
c#使用FluentFtp实现一行代码实现ftp上传下载等

c#使用FluentFtp实现一行代码实现ftp上传下载等

一:简介FluentFTP 是一个完全托管的 .NET 和 .NET Standard 的 FTP 和 FTPS 库&#xff0c;针对速度进行了优化。它提供了广泛的 FTP 命令、文件上传/下载、SSL/TLS 连接、自动目录列表解析、文件哈希/校验和、文件权限/CHMOD、FTP 代理、FXP 传输、UTF-8 支持、异步/等待支持、…
阅读更多...
软件体系结构知识点整理

软件体系结构知识点整理

包括软件体系结构风格、uml、软件质量属性、面向对象设计原则以及设计模式 pdf及goodnote版本
阅读更多...
《T-SQL性能调优秘笈——基于SQL Server 2012 窗口函数》——1.2　使用窗口函数的解决方案简介...

《T-SQL性能调优秘笈——基于SQL Server 2012 窗口函数》——1.2　使用窗口函数的解决方案简介...

本节书摘来自异步社区出版社《T-SQL性能调优秘笈——基于SQL Server 2012 窗口函数》一书中的第1章&#xff0c;第1.2节&#xff0c;作者&#xff1a; 【美】Itzik Ben-Gan&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.2　使用窗口函数的解决方案简介 …
阅读更多...
ASP.NET Core（十）Configuration 配置优先级详解

ASP.NET Core（十）Configuration 配置优先级详解

ASP.NET Core 项目启动&#xff0c;默认执行顺序为&#xff1a;宿主 Host -> 读取配置 -> 日志设置 -> 注册服务&#xff08;DI&#xff09;-> 添加中间件 -> WebHost 监听 -> 后台 Work 启动。配置的加载和读取是在启动流程的最前面。微软关于 ASP.NET Core…
阅读更多...
带中文索引的ListView 仿微信联系人列表

带中文索引的ListView 仿微信联系人列表

因为各种原因&#xff0c;项目经理和产品经理把我做的东西给否定了&#xff0c;所以决定分享出去。 主要功能&#xff1a; 1 、带中文索引的ListView 2、自己定义顶部搜索视图&#xff0c;能够对返回button&#xff0c;搜索button加入事件监听&#xff0c;带动画的咧&#xff0…
阅读更多...
解决 ASP.NET Core 部署到 IIS，更新项目时文件夹正在使用错误

解决 ASP.NET Core 部署到 IIS，更新项目时文件夹正在使用错误

前言虽然 ASP.NET Core 应用程序是跨平台的&#xff0c;但我们还是经常将它部署到 Windows 的 IIS 下。当 ASP.NET Core 站点运行时&#xff0c;它会锁定正在使用的程序集&#xff0c;如果这时向站点目录下复制文件进行更新&#xff0c;会提示文件被占用的错误&#xff1a;这时…
阅读更多...
软件配置管理（二）配置管理角色与过程

软件配置管理（二）配置管理角色与过程

文章目录一、配置管理角色及职责项目经理&#xff08;PM&#xff09;配置控制委员会&#xff08;CCB&#xff09;配置管理员&#xff08;CMO&#xff09;系统集成员&#xff08;SIO&#xff09;开发人员&#xff08;DEV&#xff09;二、配置管理基本流程计划阶段开发和维护阶段…
阅读更多...
学习笔记（二）JavaScript基本概念（语法，数据类型，控制语句，函数）

学习笔记（二）JavaScript基本概念（语法，数据类型，控制语句，函数）

一.语法 1.javascirpt中一切&#xff08;变量&#xff0c;函数名和操作符&#xff09;是严格区分大小写的。 2.javascript&#xff08;标识符&#xff09; 所谓标识符&#xff0c;就是指变量&#xff0c;函数&#xff0c;属性的名字&#xff0c;或者函数的参数。 命名规则&…
阅读更多...
Android悬浮窗口的实现

Android悬浮窗口的实现

效果图&#xff1a;&#xff08;悬浮框可拖动&#xff09; 在项目开发中有一个需求&#xff1a;弹出悬浮窗后&#xff0c;响应悬浮窗的事件再弹出对话框&#xff0c;但是对话框怎么也不显示。也就是说在弹出悬浮框的同时&#xff0c;不能再弹出对话框&#xff0c;可能的原因&am…
阅读更多...
软件配置管理（三）软件配置管理核心功能

软件配置管理（三）软件配置管理核心功能

文章目录一、CMM/CMMI与软件配置管理产品完整性二、三库管理三、基线管理基线管理的好处基线管理的步骤四、配置库管理五、变更管理变更管理流程六、配置审计七、配置状态报告一、CMM/CMMI与软件配置管理 软件配置管理是CMM/CMMI二级&#xff08;可重复级&#xff09;的一个重…
阅读更多...
移除指定 global using 命名空间

移除指定 global using 命名空间

前言在《.NET 6新特性试用 | 隐式using指令》中&#xff0c;我们介绍过&#xff0c;开启隐式using指令时&#xff0c;会在编译时生成 GlobalUsings.g.cs 文件&#xff0c;加入大量 global using 指令&#xff1a;// <auto-generated/> global using global::Microsoft.As…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023