弹性布局

弹性布局思维导图，包括容器属性和项目属性两大分支。

弹性布局

• 容器属性
  • display:flex;
  • flex-direction(主轴方向)
    • row
      • 行排列，起点在左端
    • row-reverse
      • 行排列，起点在右端
    • column
      • 列排，起点在上沿
    • column-reverse
      • 列排，起点在下沿
  • flex-wrap(是否换行)
    • nowrap(默认不换行)
    • wrap
      • 换行
    • wrap-reverse
      • 换行后第一行在下边
  • flex-flow(以上两者简写)
    • flex-flow:direction wrap;(1.方向，2.换行)
  • justify-content(水平对齐方式)
    • start(起点对齐方式)
    • end(末尾对齐方式)
    • center(居中对齐方式)
    • space-between(两端对齐)
      • 两端对齐后，每个项目间隔相等
    • space-around(等距对齐)
      • 按比例划分间隔，每个项目的间隔是两端的一倍
  • align-items(垂直对齐方式)
    • center(垂直居中)
    • stretch(拉伸占满垂直高度)
    • flex-start(在上沿对齐)
    • flex-end(在下沿对齐)
    • baseline(项目中第一行文本对齐)
  • align-content(多交叉轴对齐方式)
    • 不满多交叉轴不生效此属性
• 项目属性
  • order(排序)
    • 数字值（int）
  • flex-grow(扩展比例)
  • flex-shrink(缩小比例)
  • flex-basis（检测伸缩基准值）
  • align-self（自身对齐方式）
    • 按照上沿（flex-start)
    • 按照下沿(flex-end)