弹性子元素属性

　　

　　排序

　　

　　语法

　　

　　order:

　　

　　各个值解析:

　　

　　<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

　　

　　order 属性设置弹性容器内弹性子元素的属性:

　　

　　实例

　　

　　.flex-item {

　　

　　background-color: cornflowerblue;

　　

　　width: 100px;

　　

　　height: 100px;

　　

　　margin: 10px;

　　

　　}

　　

　　.first {

　　

　　-webkit-order: -1;

　　

　　order: -1;

　　

　　}

　　

　　对齐

　　

　　设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

　　

　　以下实例在第一个弹性子元素上设置了 margin-right: auto; 。 它将剩余的空间放置在元素的右侧：

　　

　　实例

　　

　　.flex-item {

　　

　　background-color: cornflowerblue;

　　

　　width: 75px;

　　

　　height: 75px;

　　

　　margin: 10px;

　　

　　}

　　

　　.flex-item:first-child {

　　

　　margin-right: auto;

　　

　　}

　　

　　完美的居中

　　

　　以下实例将完美解决我们平时碰到的居中问题。

　　

　　使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

　　

　　实例

　　

　　.flex-item {

　　

　　background-color: cornflowerblue;

　　

　　width: 75px;

　　

　　height: 75px;

　　

　　margin: auto;

　　

　　}