css之flex

display:flex

display:inline-flex

默认不换行，自适应

• container（容器）
  • flex-direction(主轴方向)
    • row(从左到右)（默认）
      • row-reverse(从右到左)
    • column（从上到下）
      • row-reverse(从下到上)
  • flex-wrap（是否换行）
    • nowrap(默认)
    • wrap(换行)
      • wrap-reverse(向上换行)
  • flex-flow row wrap(复合上面那俩)(一般不用)
  • justify-content(主轴排序)
    • flex-start（从主轴开始排序）(默认)
    • flex-end(从主轴结束排序)
    • center(主轴中间)
    • space-between(item左右无空间，平均分)
    • 
    • space-around(item左右有空间，平均分)
    • 
    • space-evenly(每个空隙平均分)
    • 
  • align-items（交叉轴排序）
    • stretch(会拉伸到盒子的交叉轴大小)（默认）
    • flex-start(从交叉轴开始开始)
    • 
    • flex-center(垂直居中)
    • flex-end(从交叉轴结束开始)
    • 
    • baseline（盒子里的所有item跟item最长的对齐）
    • 
  • align-content（多行，在wrap状态下）
  • flex-start(页面缩小的时候也会挨在一起 整体在下)
  • center(多出来的往下分布 flex-start、flex-start同理)
    • 
  • flex-end(页面缩小的时候也会挨在一起 整体在上)
  • space-between(多出来的往最下分布)
    • 
  • space-around(行在均匀的分布，双端各有一半spaces空格)
    • 
• item(元素)
  • align-self(可以覆盖上面的align-item,所以属性都一样)
    • auto(默认，继承父)
    • 同父的align-item
  • flex-grow(变大系数 有空间的时候会变大)
  • flex-shrinl(变小系数 无空间的时候会变小)
  • flex-basis（空间够的时候的最大值，不够的话会变小）
    • auto(默认，和自己width相同，无width的话就是里面内容的宽度)
    • nmber（宽度）
  • flex(复合以上三个flex-grow-flex-shrink-flex-basis)(一般不用)