CSS之——Flex（二）

Hello小伙伴们，好多天不见，我兔妞又杀回来了！今天继续我们的Flex吧~之前讲的是不是都忘了

，还不快去复习！上一篇着重介绍了容器，今天就介绍项目吧~

项目

项目是啥哇，其实就是一个翻译item的翻译，放在container里的元素，就成了item。下面就为大家介绍item的6个属性。

>>>>

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。排排坐吃果果啦，就类似于array，0的在第一位，1的在下一位，一次向下排，不同的是，order可以是负数，接着往0前面排。

.item {

order: <integer>;

}

>>>>

flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。要说这个适用于哪里，比如说一排元素要平均分配某个空间，或者在说在某个空间内除了其中某几个平均分，这几个适当的放大等情境。

.item {

flex-grow: <number>; /* default 1 */

}

>>>>

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。这个呢就是上一个属性的反面，有放大，也得有缩小不是~前提是空间不足哦！

.item {

flex-shrink: <number>; /* default 1 */

}

>>>>

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。这个属性其实就是给item设置一个初始的基准值，可以直接设置大小，也可以设置为auto、inherit，分别代表决定于内容的长度，与从父元素继承。

.item {

flex-basis: <length> | auto; /* default auto */

}

>>>>

flex

这个有了上一节经验的小伙伴已经猜出来了吧~bingo！flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。嗯，这个就不赘述辣~

.item {

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

}

>>>>

aglin-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。这个属性其实有点好玩，要是类比的话，可以与float比比，好比别的都是float:left; 这个偏偏要float: right;一样啦~

.item {

align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

好啦，今天的分享就到这里啦，喜欢的小伙伴们请关注+再看哦~~也欢迎后台留言多提宝贵意见呢！