flex布局语法

1. 容器属性

display: flex;
??第一个属性为默认属性

    |
    |
----|---- 主轴
    |
    |
  交叉轴

• flex-direction: row? | row-reverse? | column? | column-reverse?
  
  
• flow-wrap: nowrap | wrap -> A-> B | wrap-reverse -> B-> A
  
  
• flex-flow: ||
  
  
• justify-content: # 项目在主轴的对齐方式
  • flex-start|→ # 左对齐
  • flex-end←| # 右对齐
  • flex-center| ? | # 居中
  • space-between|→ ←| # 两端对齐，项目间隔相等
  • space-around # 每个项目两侧间隔相等
    
    
• align-items: # 项目在交叉轴轴的对齐方式
  • stretch # 未设高度，占满整个容器高度
  • flex-start # 上对齐
  • flex-end # 下对齐
  • center # 垂直居中
  • baseline # 第一行文字的基线对齐
    
    
• *align-content: # 多根轴线对齐方式

2. 项目属性

当元素为flex项目时，属性float clear vertical-align将无效

• order # 排列顺序数值越小越靠前，默认为0
  
  
• flex-grow # 定义项目放大比例，默认为0
  
  
• flex-shrink # 定义项目缩小比例，默认为1
  
  
• flex-basis # 项目占据主轴空间，默认auto
  
  
• flex: || ||
  • auto（1 1 auto） none（0 0 auto）
    
    
• align-self # 允许单个项目与其他项目不一样的对齐方式，可覆盖容器align-item属性，默认auto