在日常学习和工作中使用flex也有一段时间了，刚好现在有空闲时间，来对flex再复习一遍吧

flex相对与传统的css布局可以用更少的代码达到相同的目的，尤其在常用的布局上，使用flex可以很轻松的达到目的。

首先通过display:flex或display:inline-flex来为一个容器指定为flex布局。当指定为flex布局后，容器内的子元素的float，clear，vertical-align将会失效。容器默认的轴为从左上角开始，向右为水平的主轴，向下为垂直的交叉轴。

flex容器可以设置的6个属性。

  1. flex-direction决定了主轴的方向，可以为row：从左往右（default);row-reverse：从右往左；column：从上往下；column-reverse：从下往上。
  2. flex-warp决定了容器内的元素是否能够换行，nowrap：顾名思义，不换行；wrap：换行；wrap-reverse：倒序换行。
  3. flex-flow为flex-direction和flex-wrap属性的简写，默认为row nowrap。
  4. justify-content决定了元素在主轴上如何对齐。flex-start：靠主轴开始的地方对齐；flex-end：靠主轴接受䣌地方对齐；center：居中对齐；space-between：两端元素在两笔，中间元素均分空间对齐；space-around：两端元素有一段空间，中间元素均分剩余空间。
  5. align-items决定了容器内元素在交叉轴上如何对齐。flex-start：交叉轴起点对齐；flex-end：交叉轴终点对齐；center：居中对齐；stretch：如果元素未设置高度或为auto，那么元素将为容器高度的100%；baseline：以容器内的第一行文字的基线对齐。
  6. align-content决定了容器内有多根轴线时的对齐方式，如果只有一根轴线，那么设置此属性无效。同样的，可以为flex-start，flex-end，center，space-between，space-around，stretch。

flex容器内元素可设置的值

  1. order决定了元素的排列顺序，默认为0
  2. flex-grow决定了元素的放大比例，即除了元素已经确定了的空间之外的空间的比例，如果flex-grow小于1，那么就是直接将剩余宽度乘以flex-grow的值而不会再计算比例，flex-grow会受到max-width的影响，max-width的优先级更高。
  3. flex-shark用于在空间不够时控制元素的收缩，比如只有一个元素设置了这个，那么这个元素将会被收缩至合适的宽度。
  4. flex-basis决定了元素在分配多余的空间之前占的主轴的空间。默认为auto
  5. flex为flex-grow，flex-shrink，flex-basis的简写，默认为0 1 auto。如果为auto则为1 1 auto，如果为none则为0 0 auo，如果为1则为1 1 0。
  6. align-self属性为单个元素设置与其他元素不一样的对齐方式。优先级高于align-items。默认为auto，即继承父元素的align-items属性。如果没有父元素则为stretch。

总而言之，flex-grow用于将剩余空间按比例分配给元素，flex-shark用于将超出部分按比例分配给元素。

此篇总结借鉴了网上一些教程，在此处感谢他们♥