CSS3弹性盒布局
时间:2022-05-03
本文章向大家介绍CSS3弹性盒布局,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
- 使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <meta http-equiv="x-ua-compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <title>测试</title>
8 <style>
9 /*弹性盒布局*/
10 #container{
11 display: -webkit-box;
12 display: -moz-box;
13 }
14 #left-sidebar{
15 width: 200px;
16 padding: 20px;
17 background-color: orange;
18 }
19 #content{
20 -moz-box-flex: 1;
21 -webkit-box-flex: 1;
22 padding: 20px;
23 background-color: yellow;
24 }
25 #right-sidebar{
26 width: 200px;
27 padding: 20px;
28 background-color: limegreen;
29 }
30 #left-sidebar, #content, #right-sidebar{
31 box-sizing: border-box;
32 }
33 </style>
34 </head>
35 <body>
36 <div id="container">
37 <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
38 <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
39 <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
40 </div>
41 </body>
42 </html>
- 改变元素的显示顺序 box-ordinal-group可以改变各个元素的显示顺序。
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <meta http-equiv="x-ua-compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <title>测试</title>
8 <style>
9 /*弹性盒布局*/
10 #container{
11 display: -webkit-box;
12 display: -moz-box;
13 }
14 #left-sidebar{
15 -moz-box-ordinal-group: 2;
16 -webkit-box-ordinal-group: 2;
17 width: 200px;
18 padding: 20px;
19 background-color: orange;
20 }
21 #content{
22 -moz-box-ordinal-group: 1;
23 -webkit-box-ordinal-group: 1;
24 -moz-box-flex: 1;
25 -webkit-box-flex: 1;
26 padding: 20px;
27 background-color: yellow;
28 }
29 #right-sidebar{
30 -moz-box-ordinal-group: 3;
31 -webkit-box-ordinal-group: 3;
32 width: 200px;
33 padding: 20px;
34 background-color: limegreen;
35 }
36 #left-sidebar, #content, #right-sidebar{
37 box-sizing: border-box;
38 }
39 </style>
40 </head>
41 <body>
42 <div id="container">
43 <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
44 <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
45 <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
46 </div>
47 </body>
48 </html>
- 改变元素的排列方向 使用box-orient改变多个元素的排列方向。
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <meta http-equiv="x-ua-compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <title>测试</title>
8 <style>
9 /*弹性盒布局*/
10 #container{
11 display: -webkit-box;
12 display: -moz-box;
13 -moz-box-orient: vertical;
14 -webkit-box-orient: vertical;
15 }
16 #left-sidebar{
17 -moz-box-ordinal-group: 2;
18 -webkit-box-ordinal-group: 2;
19 width: 200px;
20 padding: 20px;
21 background-color: orange;
22 }
23 #content{
24 -moz-box-ordinal-group: 1;
25 -webkit-box-ordinal-group: 1;
26 -moz-box-flex: 1;
27 -webkit-box-flex: 1;
28 padding: 20px;
29 background-color: yellow;
30 }
31 #right-sidebar{
32 -moz-box-ordinal-group: 3;
33 -webkit-box-ordinal-group: 3;
34 width: 200px;
35 padding: 20px;
36 background-color: limegreen;
37 }
38 #left-sidebar, #content, #right-sidebar{
39 box-sizing: border-box;
40 }
41 </style>
42 </head>
43 <body>
44 <div id="container">
45 <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
46 <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
47 <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
48 </div>
49 </body>
50 </html>
- 元素宽度与高度的自适应 虽然使用盒布局时,元素的高度与宽度具有了一定的适应性,但是容器中总还是会留出一大片空白区域。
- 使用弹性盒布局来消除空白 使用弹性盒布局可以消除盒布局残留的空白问题。
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <meta http-equiv="x-ua-compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <title>测试</title>
8 <style>
9 *{
10 box-sizing: border-box;
11 margin: 0;
12 }
13 html, body{
14 width: 100%;
15 height: 100%;
16 }
17 /*弹性盒布局*/
18 #container{
19 display: -webkit-box;
20 display: -moz-box;
21 -moz-box-orient: vertical;
22 -webkit-box-orient: vertical;
23 border: 2px solid black;
24 width: 100%;
25 height: 100%;
26 }
27 #left-sidebar{
28 -moz-box-ordinal-group: 2;
29 -webkit-box-ordinal-group: 2;
30 width: 200px;
31 padding: 20px;
32 background-color: orange;
33 }
34 #content{
35 -moz-box-ordinal-group: 1;
36 -webkit-box-ordinal-group: 1;
37 -moz-box-flex: 1;
38 -webkit-box-flex: 1;
39 padding: 20px;
40 background-color: yellow;
41 }
42 #right-sidebar{
43 -moz-box-ordinal-group: 3;
44 -webkit-box-ordinal-group: 3;
45 width: 200px;
46 padding: 20px;
47 background-color: limegreen;
48 }
49 </style>
50 </head>
51 <body>
52 <div id="container">
53 <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
54 <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
55 <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
56 </div>
57 </body>
58 </html>
- 对多个元素使用box-flex属性 如果每个div元素都有box-flex,那么每个元素的宽高等于容器宽高的1/n。容器的空白部分根据box-flex的属性值进行分配。
示例代码:
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <meta http-equiv="x-ua-compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <title>测试</title>
8 <style>
9 *{
10 box-sizing: border-box;
11 margin: 0;
12 }
13 html, body{
14 width: 100%;
15 height: 100%;
16 }
17 /*弹性盒布局*/
18 #container{
19 display: -webkit-box;
20 display: -moz-box;
21 -moz-box-orient: vertical;
22 -webkit-box-orient: vertical;
23 border: 2px solid black;
24 width: 100%;
25 height: 100%;
26 }
27 #left-sidebar{
28 -moz-box-ordinal-group: 2;
29 -webkit-box-ordinal-group: 2;
30 -moz-box-flex: 1;
31 -webkit-box-flex: 1;
32 padding: 20px;
33 background-color: orange;
34 }
35 #content{
36 -moz-box-ordinal-group: 1;
37 -webkit-box-ordinal-group: 1;
38 -moz-box-flex: 2;
39 -webkit-box-flex: 2;
40 padding: 20px;
41 background-color: yellow;
42 }
43 #right-sidebar{
44 -moz-box-ordinal-group: 3;
45 -webkit-box-ordinal-group: 3;
46 -moz-box-flex: 1;
47 -webkit-box-flex: 1;
48 padding: 20px;
49 background-color: limegreen;
50 }
51 </style>
52 </head>
53 <body>
54 <div id="container">
55 <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
56 <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
57 <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
58 </div>
59 </body>
60 </html>
- 指定水平方向与垂直方向的对齐方式 可以使用box-pack属性及box-align属性来指定元素中文字、图片水平或垂直方向的对齐方式。
示例代码:
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <meta http-equiv="x-ua-compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <title>测试</title>
8 <style>
9 *{
10 box-sizing: border-box;
11 margin: 0;
12 }
13 html, body{
14 width: 100%;
15 height: 100%;
16 }
17 /*弹性盒布局*/
18 #container{
19 display: -webkit-box;
20 display: -moz-box;
21 -moz-box-align: center;
22 -webkit-box-align: center;
23 -moz-box-pack: center;
24 -webkit-box-pack: center;
25 -moz-box-orient: vertical;
26 -webkit-box-orient: vertical;
27 border: 2px solid black;
28 width: 50%;
29 height: 50%;
30 }
31 #content{
32 display: -webkit-box;
33 display: -moz-box;
34 -moz-box-align: center;
35 -webkit-box-align: center;
36 -moz-box-pack: center;
37 -webkit-box-pack: center;
38 -moz-box-orient: vertical;
39 -webkit-box-orient: vertical;
40 width: 50%;
41 height: 50%;
42 padding: 20px;
43 background-color: yellow;
44 }
45 </style>
46 </head>
47 <body>
48 <div id="container">
49 <div id="content">示例文字。</div>
50 </div>
51 </body>
52 </html>
- CaseStudy(showcase)数据篇-从XML中获取数据
- CaseStudy(showcase)布局篇-全屏效果
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(12)-系统日志和异常的处理②
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(14)-EasyUI缺陷修复与扩展
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(10)-系统菜单栏[附源码]
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(5)-EF增删改查
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(15)-权限管理系统准备
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(11)-系统日志和异常的处理①
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查
- No.3 啥是数据运营(三):思维方式
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(7)-MVC与EasyUI DataGrid
- MySQL数据同步【双主热备】
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(6)-Unity 依赖注入
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 每日打卡 373. 查找和最小的K对数字
- IE11出现"__doPostBack”未定义
- latex()、ploy2sym()、symsum()的妙用
- 性能最佳实践:MongoDB数据建模和内存大小调整
- 节省你生命的一个小技术No.193
- K8S 生态周报| Traefik v2.3.0-rc2 发布
- 如何从 Notion 批量导出 Markdown?
- 【LeetCode】1518. 换酒问题
- OBS推流工具使用说明
- Python多进程
- app反编译遇到360加固,傻瓜式脱壳
- Java底层-本地接口(JNI)
- 如何从最坏、平均、最好的情况分析复杂度?
- 利用Python进行MR栅格数据处理
- 利用Sql处理MR栅格数据