Flex布局详解（二）

2、flex item的属性：

（1）、flex-grow
HTML

<div class="parent">
    <div class="child">3sdfasfasa</div>
    <div class="child">4234dfswed</div>
    <div class="child">wewesdsdfds</div>
  </div>

CSS

.parent{
  background:#ddd;
  display:flex;
}
.child{
  height:50px;
  background:white;
  margin:1px;
}

在上面CSS中加上下面这句，意思就是将多余空间全部分配到第一个item中。数字大于1就是全部分配某个item上。

.child:nth-child(1){
  flex-grow:1
}

上面CSS中改成下面这句，意思就是将多余空间按照比例2:1:3分配到这三个item中。

.child:nth-child(1){
  flex-grow:2
}
.child:nth-child(2){
  flex-grow:1
}
.child:nth-child(3){
  flex-grow:3
}

（2）、flex-shrink
将增长比例CSS代码改成下面的

.child:nth-child(1){
flex-shrink:2;
}
.child:nth-child(2){
  flex-shrink:1;
}
.child:nth-child(3){
 flex-shrink:5;
}

（3）、flex-basis
CSS

.parent{
  background:#ddd;
  display:flex;
  width:300px;
}
.child{
  height:80px;
  background:white;
  margin:1px;
}
.child:nth-child(1){
  flex-basis:300px;
}

flex-basis时默认值大小，我们可以改变它的值优先分配大小。
（4）、flex
CSS

.parent{
  background:#ddd;
  display:flex;
  width:300px; 
}
.child{
  height:80px;
  background:white;
  margin:1px;
}
.child:nth-child(1){
  flex:1 2 300px;   //涨的时候吃一份，缩的时候缩两份，原始大小是100px
}

flex 是三个flex-grow 、flex-shrink、flex-basis三个缩写形成，三个值按顺序进行编写。
（5）、order 顺序（代替双飞翼）
CSS

.parent{
  background:#ddd;
  display:flex;
  width:300px;
}
.child{
  height:50px;
  width:100px;
  background:white;
  margin:1px;
}

在上述CSS加上下面代码（order）

.child:nth-child(1){
 order:3;
}
.child:nth-child(2){
 order:2;
}
.child:nth-child(3){
 order:1;
}

（6）、align-self 自身的对齐方式
HTML

  <div class="parent">
    <div class="child">
      11111 <br>
      1111 <br>
      111 <br>
      11 <br>
      1 <br>
    </div>
    <div class="child">
      2 <br>
      2 <br>
      2 <br>
    </div>
     <div class="child">3</div>
  </div>

CSS

.parent{
  background:#ddd;
  display:flex;
  width:400px;
  justify-content:space-around;
  align-items:flex-start;
}
.child{
  width:80px;
  background:white;
  margin:1px;
}

.child:nth-child(3){
  align-self:center;  //属性值改变时如下图所示变化
}