关于flex那些事儿

由于使用display和position以及float属性对页面进行布局的时候，对水平居中，垂直居中，水平垂直居中就比较难实现，所以就出现了flex来解决该类问题。

他主要是有俩根轴线控制，主轴和交叉轴

外层是父容器，里面是flex项目。
可以通过父容器属性来设置flex项目的排练对齐方式等；也可以通过项目属性来控制项目的布局。

容器属性

1. flex-direaction：项目在主轴的方向，默认（row，项目的起点在左端）
   row（默认值）：主轴为水平方向，起点在左端。
   row-reverse：主轴为水平方向，起点在右端。
   column：主轴为垂直方向，起点在上沿。
   column-reverse：主轴为垂直方向，起点在下沿。
2. flex-wrap：项目的换行方式（nowrap，默认不换行）
   nowrap（默认）：不换行。
   wrap：换行，第一行在上方。
   wrap-reverse：换行，第一行在下方。
3. flex-flow：flex-direaction和flex-wrap属性的结合，（默认值为row nowrap）
4. justify-content：项目在主轴的对齐方式（flex-start，左对齐）
   flex-start（默认值）：左对齐
   flex-end：右对齐
   center： 居中
   space-between：两端对齐，项目之间的间隔都相等。
   space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5. align-items：项目在交叉轴的对齐方式（stretch， 项目未设置高度或者auto，则占满整个容器高度）
   flex-start：交叉轴的起点对齐。
   flex-end：交叉轴的终点对齐。
   center：交叉轴的中点对齐。
   baseline: 项目的第一行文字的基线对齐。
   stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
   flex-start：与交叉轴的起点对齐。
   flex-end：与交叉轴的终点对齐。
   center：与交叉轴的中点对齐。
   space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
   space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
   stretch（默认值）：轴线占满整个交叉轴。

项目属性

1. order：项目的排列顺序，数值越小，排名越靠前，默认0
2. flex-grow：项目的放大比例，默认0
   当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间
3. flex-shrink ：项目的缩小比例，默认1
   父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的
4. flex-basis ： 定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto
   元素上同时设置了width和flex-basis，那么flex-basis的优先级 > width
5. flex：是flex-grow, flex-shrink 和 flex-basis的简写
6. align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
   auto（默认值）
   flex-start
   flex-end
   center
   baseline
   stretch

关于flex-basis的具体解释：该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。

关于flex的一设置

flex: 1这种缩写形式是flex-grow，flex-shrink，flex-basis的缩写

单值语法	等同于	使用频率
flex: initial	flex: 0 1 auto	初始值，常用
flex: 0	flex: 0 1 0%	适用场景少
flex: none	flex: 0 0 auto	推荐
flex: 1	flex: 1 1 0%	推荐
flex: auto	flex: 1 1 auto	适用场景少

flex是flex-grow, flex-shrink 和 flex-basis的简写

1、flex为一个值的时候

• flex: 0
• flex: none
• flex: 1：
• flex: auto
• flex: 20px：等同于flex: 1 1 20px

2、flex为两个值的时候

• 如果flex的属性值有两个值，则第1个值一定指flex-grow，第2个值根据值的类型不同表示不同的CSS属性，具体规则如下：
• 如果第2个值是数值，例如flex: 1 2等同于flex: 1 2 0%
  如果第2个值是长度值，例如flex: 1 100px等同于flex: 1 0 100px

3、flex为三个值的时候

是flex-grow, flex-shrink 和 flex-basis

flex实现骰子布局

.box{
   width: 100px;
   height: 100px;
   border: red 1px solid;
   display: flex;
 }
 .item{
   width: 30px;
   height: 30px;
   background-color: pink;
   border-radius: 30px;
 }
 .item:nth-child(2){
   align-self:center;
 }
 .item:nth-child(3){
   align-self:flex-end;
 }
 
<div class="box">
   <span class="item"></span>
   <span class="item"></span>
   <span class="item"></span>
</div>

flex 两边固定宽度，中间自适应

.content {
    display: flex;
    align-items: center;
  }
  .item-left {
      width: 94px;
      flex: 0 0 94px;
      background: red;
      width: 100px;
      height: 100px;
  }
  .item-center {
      flex: 1 1 auto;
      background: yellow;
      width: 100px;
      height: 100px;
  }
  .item-right {
      width: 16px;
      flex: 0 0 16px;
      background: blue;
      width: 100px;
      height: 100px;
  }

flex-shrink与flex-grow同时设置会有什么效果？

取决于是否有剩余空间或空间不足。

• 空间剩余的情况下，且子元素都设置了flex-grow

// 有300px的剩余空间，inner1的宽度最终为：200+300*(3/(3+2)) = 380px
.box {
  display: flex;
  flex-direction: row;
  width: 600px;
  height: 200px;
  border: 1px solid red;
}
.inner1 {
  flex-basis: 200px;
  height: 100px;
  background: black;
  flex-grow: 3;
}
.inner2 {
  flex-basis: 100px;
  height: 100px;
  background: blue;
  flex-grow: 2;
}

• 空间不足的情况下，且子元素都设置了flex-shrink

// 有100px不足，inner1的宽度最终为：200-(100*3*200)/(200*3+300*2) = 150px
.box {
  display: flex;
  flex-direction: row;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.inner1 {
  flex-basis: 200px;
  height: 100px;
  background: black;
  flex-shrink: 3;
}
.inner2 {
  flex-basis: 300px;
  height: 100px;
  background: blue;
  flex-shrink: 2;
}