flex布局的兼容性写法
2017-09-06 14:40
246 查看
原创链接:http://blog.csdn.net/u010035608/article/details/52711248 (尊重原创)
CSS弹性盒模型 flex布局兼容性写法
CSS样式
示例-两端对齐
图示
flex-v:盒模型垂直布局
flex-1:子元素占据剩余的空间
flex-align-center:子元素垂直居中
flex-pack-center:子元素水平居中
flex-pack-justify:子元素两端对齐
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
[/code]
兼容性:ios 4+、android 2.3+、winphone8+
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
[/code]
CSS弹性盒模型 flex布局兼容性写法
CSS样式
示例-两端对齐
图示
CSS样式
flex:定义布局为盒模型flex-v:盒模型垂直布局
flex-1:子元素占据剩余的空间
flex-align-center:子元素垂直居中
flex-pack-center:子元素水平居中
flex-pack-justify:子元素两端对齐
.flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flex-v { -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex-1 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .flex-align-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex-pack-center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .flex-pack-justify { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }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
[/code]
兼容性:ios 4+、android 2.3+、winphone8+
示例-两端对齐
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style type="text/css"> .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;} .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;} </style> </head> <body> <div class="flex flex-pack-justify"> <div>模块一</div> <div>模块二</div> <div>模块三</div> <div>模块四</div> </div> </body> </html>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
[/code]
图示
相关文章推荐
- flex布局兼容性写法
- flex布局兼容性写法
- Flex布局兼容性写法
- flex布局兼容性写法,使用于任何移动端安卓苹果
- 2017-03-21 Flex布局新旧混合写法详解(兼容微信) http://www.tuicool.com/articles/Yzeu6j7
- 移动Web开发基础-flex弹性布局(兼容写法)
- Flex布局新旧混合写法详解(兼容微信)
- flex布局的兼容性
- flexbox布局兼容性写法
- flex-弹性布局以及其兼容性
- flex兼容性写法
- 前端:flex布局兼容性问题
- Flex布局新旧混合写法详解(兼容微信)
- flex和box兼容性写法
- flex布局兼容性问题
- flex兼容性写法
- 移动端flex布局 微信和UC的兼容性
- flex布局兼容性问题
- flex布局兼容性问题
- Flex布局新写法兼容写法详解