弹性布局小介绍

1.弹性布局

弹性布局是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局方式已经被主流浏览器所支持，可以在 Web 应用开发中使用.

 

2.弹性布局与响应式布局的区别

弹性布局不需要人为的计算百分比,他能自动分配大小,你只需要写每一个所占的比例就行比如A和B,你想让A占2/3,B占1/3.你就可以写2,1就行.浏览器自动分配.也可以写定值. 

3..弹性布局的一般步骤和注意事项

?
1
2
3
4
5
1 找到其父标签 设置display:box;
2 在子标签中通过box-flex属性设置布局所占百分比(可以是数字或者固定px),内容撑开其大小;
3 子标签默认是水平布局;
4 要考虑浏览器兼容问题,很多浏览器不支持,因为w3c对这种标准还在发展建设中;
5 弹性布局有很多不同的写法,以课堂笔记的写法为主.

4.下面就是举的一个例子:还有几个对齐方式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>弹性布局</title>
        <style type="text/css">
            *{margin: 0;
            padding: 0;
            }
            html,body{height: 100%;}
            /*顶部*/
            header{
                border: 1px solid green;
                /*这行代码意思是让其子标签可以弹性伸缩*/
                display: -webkit-box;
                display: -moz-box;
                 
                /*弹性盒子的一些属性*/
                /*布局方式水平还是垂直*/
                /*-webkit-box-orient:horizontal;*/
                /*-moz-box-orient: horizontal;*/
                /*水平对齐,默认就是水平对齐*/
                 
                 
                /*-webkit-box-orient: vertical;*/
                /*-moz-box-orient: vertical;*/
                /*垂直对齐*/
                 
                 
                 
                /*水平对齐方式*/
                /*-webkit-box-align: end;*/
                /*-moz-box-align: center;*/
                 
                 
                 
                 
                 /*垂直对齐方式*/
                 /*-webkit-box-pack: end;*/
                 /*-moz-box-pack: start;*/
                 
                 
                 
            }
             
            .logo{
                 
                /*height: 200px;*/
                width: 200px;
                background: yellow;
                /*-webkit-box-flex: 1;*/
                /*-moz-box-flex: 1;*/
                 
            }
            nav{
                background: red;
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
         
                    }
                     
                     
                     
            .warp{
                height: 50%
            }
            section{
                display: -webkit-box;
                display: -moz-box;
                height: 200px;
                border: 1px dashed black;
                -webkit-box-orient:horizontal;
                -moz-box-orient: horizontal;
                /*水平,默认就是水平*/
                 
                 
                /*-webkit-box-orient: vertical;*/
                /*-moz-box-orient: vertical;*/
                /*垂直*/
                 
                 
                 
                /*水平对齐方式*/
                /*-webkit-box-align: end;*/
                /*-moz-box-align: end;*/
                 
                 
                 
                 
                 /*垂直对齐方式*/
                 /*-webkit-box-pack: center;*/
                 /*-moz-box-pack: center;*/
                 
                 
            }
             
            .left{
                background-color: green;
                -webkit-box-flex: 1;
                -webkit-box-flex: 1;
                 
                 
            }
             
            .center{
                background-color: aqua;
                -webkit-box-flex:2 ;
                -moz-box-flex: 2;
                /*border: 10px solid chartreuse;*/
            }
            .right{
            background-color: salmon;
                -webkit-box-flex:1 ;
                -moz-box-flex:1 ;
                 
            }
             
            footer{
                display: -webkit-box;
                display: -moz-box;
                height: 20%;
            }
            footer div{
                border: 1px solid red;
                -webkit-box-flex: 1;
                -webkit-box-flex: 1;
            }
             
             
        </style>
    </head>
    <body>
        <div class="warp">
            <header>
                <div class="logo">
                    左logo
                </div>
                <nav>导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航
                    导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
                    导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
                    导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
                    导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
                    导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
                    导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导航导
                    航导航导航导航导航导航导航导航导航导航导航导航
                </nav>
            </header>
             
            <section>
                <div class="left">左边</div>
                <div class="center">中间</div>
                <div class="right">右边</div>
                 
            </section>
             
            <footer>
                <div class="one">11</div>
                <div class="two">22</div>
                <div class="three">33</div>
                <div class="four">44</div>
            </footer>
        </div>
         
         
         
    </body>
</html>

　　本人也是新手,希望写的不好的地方大神多指点QAQ

posted @   骑着小猪来编程  阅读(300)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
阅读排行：
· C# 13 中的新增功能实操
· Supergateway：MCP服务器的远程调试与集成工具
· Vue3封装支持Base64导出的电子签名组件
· 万字长文详解Text-to-SQL
· Ollama本地部署大模型总结
点击右上角即可分享
微信分享提示