布局-flex布局

上一个blog分享了布局的选用思路和float布局，这个blog主要聊聊flex布局。
首先其flex布局元素分为display为flex和inline-flex的元素，其主要区别就是和block和inline-block的区别相同。
flex的方向有4个，row，column，row-reverse，column-reverse，通常我们可以用flex-flow来控制方向和换行与否
eg：flex-flow:row nowrap;
如果不换行，就算设定每个item的宽度，如果外包的不够位置也会自动压缩自己大小。
eg:

.fa{
  outline: 1px black solid;
width:100px;
display:flex;
    flex-wrap:nowrap;}
.child{
border:1px black solid;
  width:100px;
  height: 100px;
  display:flex
}

明显每一个都不足100px

所以一定要wrap。

对齐方式

主轴

justify-content:

1. flex-start/end
2. center（居中）
3. space-between
   eg

.fa{
  outline: 1px black solid;
width:400px;
display:flex;
    flex-wrap:wrap;
justify-content: space-between;}
.child{
border:1px black solid;
  width:100px;
  height: 100px;
  display:flex;
}

两边贴墙，代表了中间多出来的100px均匀分在3个东西中间 均匀分布

4. space-around
   

   两边不贴墙，分在中间和两边 均匀分布在每个元素两边

次轴

align-items：

1. flex-start/end
2. center（居中）
   . stretch
   强行让不同高度的item一样高。

内容排序

1. order，按照从小到大的order顺序排序。
2. flex-grow:
   有多余的位置按照flex-grow后的数值分配给每个子级。

*{
  padding: 0;
  margin:0;
  box-sizing:border-box ;
}
.parent{
  display: flex;
  border: 1px  blue solid;
  height: 100px;
  width:400px;
}
.child{
    display: flex;
  border: 1px  blue solid;
  height: 100px;
  width:100px;
}
.2{ flex-grow:2;
}

2就会把剩下的所有空间都占了

因为这里没有设置其他的flex-grow所以都给了2.
如果设置了就会按照数值分配。

3. flex-shrink
   空间不够的时候按照数值去减小体积。
   eg：

*{
  padding: 0;
  margin:0;
  box-sizing:border-box ;
}
.parent{
  display: flex;
  border: 1px  blue solid;
  height: 100px;
  width:210px;
}
.child{
    display: flex;
  border: 1px  blue solid;
  height: 100px;
  width:100px;
}
.2{ flex-shrink:100;
}

      ![主要减少的是2](https://img.haomeiwen.com/i19247518/0b7546ba76936a35.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

可以看到当parent的宽度减小到300以下哎，主要减少的就是2了，非常明显。

4. align-self：
   让某个可以特立独行。就是单独设置其align-items。