CSS3.0 FLEX布局(兼容微信浏览器)

CSS3.0中的Flex布局旨在提供一个更佳有效的布局方式,更好的控制项目的对齐和自由分配容器空间,即使它们的大小是未知的或动态的。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex的教程一google一大把,在此不做介绍,仅介绍一下能够兼容微信浏览器的写法:

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
  /* 设置flex布局 */
display:-webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */
display:-webkit-flex;/* Chrome 21+ */
display:-ms-flexbox;/* WP IE 10 */
display:flex;/* android 4.4 */
/* 设置方向 */
-webkit-box-orient: vertical;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-flex-direction: column;/* Chrome 21+ */
-ms-flex-direction: column;/* WP IE 10 */
flex-direction: column;/* android 4.4 */

/* 子元素自动占据剩余的空间 */
-webkit-box-flex:1;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-flex:1;/* Chrome 21+ */
-ms-flex:1;/* WP IE 10 */
flex:1;/* android 4.4 */

/* 子元素 水平居中 */
-webkit-box-pack: center;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-justify-content: center;/* Chrome 21+ */
-ms-flex-pack: center;/* WP IE 10 */
justify-content: center;/* android 4.4 */

/* 水平布局下的子元素 垂直居中 */
-webkit-box-align: center;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-align-items: center;/* Chrome 21+ */
-ms-flex-align: center;/* WP IE 10 */
align-items: center;/* android 4.4 */

/* 水平布局下的子元素 2端对齐 */
-webkit-box-pack: justify;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-justify-content: space-between;/* Chrome 21+ */
-ms-flex-pack: justify;/* WP IE 10 */
justify-content: space-between;/* android 4.4 */

坚持原创技术分享,您的支持将鼓励我继续创作!