弹性盒子的相关知识

目的：

• 提供一种更加有效的方式来布置、对齐和分布在容器之间的各项内容，即使他们的大小是未知的变化的
•  让容器有能力改变项目的宽和高，以填满可用空间

布局与方向无关

• 块属性：垂直
• 行间：水平

属性：

• dispaly:flex/dispaly:inline-flex   适用于父级
• fix-direction  写在父级css中，但作用于子级   检索子级在盒子中的位置，也就是子级的排列顺序        值：flex-direction :row   横向，左到右  flex-direction :row-reverse   反横向，右到左
  flex-direction :column     纵向，从上到下 flex-direction :column-reverse    反纵向，从上到下
• flex-wrap   写在父级，作用于子级检索，子级是否超出父级，换不换行
  值：flex-wrap :nowrap   不换行   flex-wrap :wrap 换行   flex-wrap :wrap-reverse    反转wrap排列
• flex-flow   复合属性，写在父级，作用于子级   flex-flow：<flex-direction> <flex-wrap>
  就是先写排列方式，再写是否换行
• Justify-content   检索弹性盒子在主轴（x）方向上的对齐方式        写在父级，作用于子级         值：justify-content :flex-start      左对齐           justify-content :flex-end    右对齐             justify-content :center     居中         justify-content :space-between   两端居中，中间等间距
• align-items   检索弹性盒子在y轴上的对齐方式写在父级，作用于子级
  值：align-items :flex-start      置顶                    align-items :flex-end    置底
  align-items :center     居中                   align-items :baseline   与基线对齐
  align-items :stretch 置顶+置底，高度受min-height与max-height制约
• align-content       检索 换行时对齐方式写在父级，作用于子级                                                      值：align-content :flex-start      置顶align-content :flex-end    置底
  align-content :center     居中align-content :space-between   上下置顶+置底 ，中间居中
  align-content :space-around   纵向平分空间，各行居中显示
  align-content :stretch   纵向平分空间，各行以最大方式显示
• order  排列方式  写在字子级    值是阿拉伯数字    值越小，排位越靠前
• flex-grow  分配剩余空间   写在子级  值越大分配的空间越大
• felx-shrink  写在子级