细说css3 flex布局之flex项目属性

在前篇博文中已经详细叙述了flex布局中的容器属性，那么现在就来谈谈flex项目属性那些事······

以下6个属性是作用在flex项目上的：

order

flex-grow

flex-shrink

flex-basis

flex

align-self

1.1 order属性

该属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0。用法及效果如下：

html代码

<div class="flex-box">
<div class="flex-item">item1</div>
<div class="flex-item">item2</div>
<div class="flex-item">item3</div>
</div>

css代码

.flex-box{
background:orange;
display: flex;     /*定义为flex布局*/
}
.flex-item{
margin:10px;
height:100px;
width:100px;
background: purple;
color:#fff;
}
div:first-child{
order:0;   /*item1的序号为0*/
}
div:nth-child(2){
order:-1;
}
div:last-child{
order:2;
}

效果图：



注意，在本例中没有设置flex-direction的属性，那么其值默认是row，你也可以尝试将其设置成column，那么flex项目则会根据order纵向排列。

1.2 flex-grow属性

该属性定义项目的放大比例，默认为0，即不作任何的放大。flex容器下的项目是根据这个值的比例对容器的剩余空间进行瓜分的。用法及效果如下：

.item-class{
flex-grow:1;
}

效果图：



说明：在使用这个属性的时候，一般也最好不要对flex项目设置宽度/高度，否则会影响flex容器的比例分配。

1.3 flex-shrink属性

该属性定义了项目的缩小比例，默认为1，即项目缩小。用法及效果如下：

.item-class{
flex-shrink:0;
}

效果图：



说明：这里flex容器的宽度设置成600px，flex项目的宽度均为300px，margin:10px；在为item1分配完空间后，剩下的空间被后面两个项目按比例缩小分配。

1.4 flex-basis属性

该属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴(main asix)是否有多余空间。她的默认值为auto，即项目 原本大小。它换可以设置为跟width属性一样的值（100px），即项目占据固定空间（容器宽度不够自动被压缩）。用法及效果如下：

.item-class{
flex-basis:100px | auto;
}

效果图：



说明：该属性的用法就像是使用width(flex-direction:row; 的时候)或heigh(direction为column的时候)属性那样，在容器宽度不够的时候，它会按照flex-shrink属性的默认值压缩项目。

1.5 flex属性

该属性是前三个属性：flex-grow、flex-shrink、flex-basis的简写形式。默认值为0 1 auto，即不放大，自动缩小，后面两个属性值是可选项。该属性有两个快捷键值：auto(0 1 auto)，none（0 0 auto）。建议优先使用这个属性，而不是单独写三个分离的属性。

1.6 align-self属性

该属性允许单个项目有与其他项目不一样的对齐方式。可覆盖作用在flex容器上的align-items属性。默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同stretch。value的取值包括：auto、flex-start、flex-end、end、baseline、stretch。该属性额取值除了auto致亲爱，这个属性作用在项目上的效果跟align-items作用在项目父元素（flex容器）上的效果是一样的，唯一不同的是：align-self仅对使用该属性的项目其效果，align-items是对所有的项目其效果。至于各种属性值所起的效果，大家可以参考前篇博文《细说css3 flex布局值flex容器属性》。

至此，关于css3的flex布局就介绍完了，尝试运用下吧，真的很强大！