Flex详解（图文+在线示例）下

该文是本人的译文，如想看原文请点击传送门

如需转载请注明来源与作者

讲解分为两部分，一部分讲解的是container的属性，另一部分讲解children属性。

本文讲解children的属性。讲解的另外一篇传送门。

本文讲的是在flex items上的属性

container children

order

order

在默认情况下，flex items排布顺序是按照资源的顺序。但是，order属性可以控制在flex container下的子元素的顺序。

.item{
    oreder: <整数>  ;
}

示例点击

---

flex-grow

flex-grow

这个属性定义了弹性元素扩展的能力。它能够接受无单位的值来用作占比。它规定了弹性容器下的弹性元素可以占据多少的可用空间。
如果所有的items都有flex-grow等于1，容器内的剩余空间会等分地分配到每一个元素。如果其中某一个元素有是2的值，那么这个元素会占据的剩余空间相当于其他元素的2倍。

.item{
    flex-grow: <number>;/*默认值为0，并且其中负值是非法的。*/
}

示例点击

---

flex-shrink

这个属性定义了弹性元素会在必要的时候会收缩。

.item {
  flex-shrink: <number>; /* 默认值为1 ，并且负值是非法的*/
}

---

flex-basis

这个属性定义在剩余空间被分配之前默认情况下元素的大小。这个值可以是长度（比如：20%，5rem等等）或者是一个关键词。auto 关键词意味着"着眼于我的宽度或者高度"(这会临时用于主尺寸关键字，直到被抛弃)。关键词`content指"内容决定尺寸"-这个关键字还没有得到较好的支持，所以测试比较困难，并且难以得到它的兄弟元素最大内容最小内容和最佳内容。

.item{
    flex-basis:<length>|| auto ; /*默认值：auto*/
}

如果设置为0，包围内容的额外空间不会计算在内。如果设置为auto，那么剩余空间将会按照flex-grow进行分配。

示例点击

---

flex

这是flex-grow,flex-shrink,flex-basis的简写。第二个和第三个参数是可选的(flex-shrink,flex-basis是可选项)。flex的默认值是0，1，auto；

···
.item{
flex:none | [ <'flex-grow'> <'flex-shrink'>?|| <'flex-basis'> ]
}
···

推荐你使用简写的属性，而不是去设置单一的属性。简写设置其他值是非法的。

---

align-self

align-self

这个属性允许默认的对齐方被覆盖（或者通过align-self指定一个元素）

.item{
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
} 

实例点击

NOTE: float,clear,vertical-align对弹性元素不起作用