H5移动端知识点总结 - 惟愿一生(6)_H5之家 - 中国HTML5教程资源分享第一站

再加上justify-content: space-between;说明两端对齐.但是在UC浏览器并不支持该属性，使其不能垂直两端对齐，因此为了兼容UC浏览器，需要使用-webkit-box;因此整个代码变成如下：

.first-face { display: flex; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; display: -webkit-box; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack:justify; }

如上使用 -webkit-box-direction: normal; 使其对齐方向为水平从左端开始，-webkit-box-orient: vertical;使用这句代码告诉

浏览器是垂直的,-webkit-box-pack:justify;这句代码告诉浏览器垂直的两端对齐。

如下图所示：

3 . 垂直居中两端对齐

代码如下：

.first-face { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }

多加一句 align-items: center;代码; 表示交叉轴上居中对齐。同理在UC浏览器下不支持的，因此我们为了兼容UC浏览器，可以加上如下代码，因此整个代码如下：

.first-face { display: flex; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; align-items:center; display: -webkit-box; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack:justify; -webkit-box-align:center; }

再加上-webkit-box-align:center;这句代码，告诉浏览器垂直居中。如下图所示：

4. 垂直居右两端对齐

代码如下：

.first-face { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }

同理为了兼容UC浏览器，整个代码变成如下：

.first-face { display: flex; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; align-items:flex-end; display: -webkit-box; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack:justify; -webkit-box-align:end; }

和上面代码一样，只是更改了一下垂直对齐方式而已;如下图所示：

注意：下面由于时间的关系，先不考虑UC浏览器的兼容

三：3丙

代码如下：

HTML代码：

CSS代码如下：

.first-face { display: flex; flex-direction: column; justify-content: space-between; } .pip:nth-child(2) { align-self: center; } .pip:nth-child(3) { align-self: flex-end; }

如下图所示：

四： 4丙

代码如下：

HTML代码：

CSS代码如下：

.column{ display: flex; justify-content: space-between; } .first-face { display: flex; flex-direction: column; justify-content: space-between; }

如下图所示：

五：5丙

HTML结构如下：

css代码如下：

.column{ display: flex; justify-content: space-between; } .first-face { display: flex; flex-direction: column; justify-content: space-between; } .first-face .column:nth-of-type(2){ justify-content: center; }

如下图所示：

六：6丙

HTML结构如下：

css代码如下：

.column{ display: flex; justify-content: space-between; } .first-face { display: flex; flex-direction: column; justify-content: space-between; }

如下图所示：

7,8,9丙也是一个意思，这里先不做了;

回到顶部

Flex布局兼容知识点总结

假设父容器class为 box,子项目为item.

旧版语法如下：

一：定义容器的display属性。

旧语法如下写法：

.box { display: -moz-box; display: -webkit-box; display: box; }

新版语法需要如下写：

.box{ display: -webkit-flex; display: flex; }

或者行内

.box{ display: -webkit-inline-flex; display:inline-flex; }

二：容器属性(旧版语法)

1. box-pack 属性;(水平方向上对齐方式)

box-pack定义子元素主轴对齐方式。

.box{ -moz-box-pack: center; -webkit-box-pack: center; box-pack: center; }

box-pack属性总共有4个值：

.box{

box-pack: start | end | center | justify;

/*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/

}

各个值的含义如下：

start:

对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间)

对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）

end:

对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。

对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。

center:

均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后.

justify:

在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。

2.box-align 属性(垂直方向上的对齐方式)

box-align定义子元素交叉轴对齐方式。

.box{ -moz-box-align: center; /*Firefox*/ -webkit-box-align: center; /*Safari,Opera,Chrome*/ box-align: center; }

box-align属性总共有5个值：

.box{ box-align: start | end | center | baseline | stretch; /*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/ }

各个值的含义如下：

start:

对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。

对于反方向的框，每个子元素的下边缘沿着框的底边放置。

end:

对于正常方向的框，每个子元素的下边缘沿着框的底边放置。

对于反方向的框，每个子元素的上边缘沿着框的顶边放置。

center:

均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。

baseline:

如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。

stretch:

拉伸子元素以填充包含块

3.box-direction 属性

box-direction定义子元素的显示方向。

.box{ -moz-box-direction: reverse; /*Firefox*/ -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/ box-direction: reverse; }

box-direction属性总共有3个值：

.box{ box-direction: normal | reverse | inherit; /*显示方向：默认方向 | 反方向 | 继承子元素的 box-direction*/ } 4.box-orient 属性

box-orient定义子元素是否应水平或垂直排列。

.box{ -moz-box-orient: horizontal; /*Firefox*/ -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/ box-orient: horizontal; }

box-orient属性总共有5个值：

.box{ box-orient: horizontal | vertical | inline-axis | block-axis | inherit; /*排列方向：水平 | 垂直 | 行内方式排列（默认） | 块方式排列 | 继承父级的box-orient*/ }

horizontal: 在水平行中从左向右排列子元素。

vertical: 从上向下垂直排列子元素。

inline-axis：沿着行内轴来排列子元素（映射为 horizontal）。

block-axis：沿着块轴来排列子元素（映射为 vertical）。

inherit：应该从父元素继承 box-orient 属性的值。

5.box-lines 属性

box-lines定义当子元素超出了容器是否允许子元素换行。

.box{ -moz-box-lines: multiple; /*Firefox*/ -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/ box-lines: multiple; }

box-lines属性总共有2个值：

.box{ box-lines: single | multiple; /*允许换行：不允许（默认） | 允许*/ }

single：伸缩盒对象的子元素只在一行内显示multiple：伸缩盒对象的子元素超出父元素的空间时换行显示

6.box-flex 属性。

box-flex定义是否允许当前子元素伸缩。

.item{ -moz-box-flex: 1.0; /*Firefox*/ -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/ box-flex: 1.0; }

box-flex属性使用一个浮点值：

.item{ box-flex: <value>; /*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/ }

7.box-ordinal-group 属性

box-ordinal-group定义子元素的显示次序，数值越小越排前。

.item{ -moz-box-ordinal-group: 1; /*Firefox*/ -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/ box-ordinal-group: 1; }