css弹性子元素属性怎么用

小编给大家分享一下css弹性子元素属性怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

　　弹性子元素属性

　　排序

　　语法

　　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;

　　}

以上是“css弹性子元素属性怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！