flex布局语法

flex布局语法

1. 容器属性

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

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

• flex-direction: row➡ | row-reverse⬅ | column⬇ | column-reverse⬆
  
  
• flow-wrap: nowrap | wrap -> A-> B | wrap-reverse -> B-> A
  
  
• flex-flow: <flex-direction> || <flow-wrap>
  
  
• justify-content: # 项目在主轴的对齐方式
  • flex-start|→ # 左对齐
  • flex-end←| # 右对齐
  • 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: <flex-grow> || <flex-shrink> || <flex-basis>
  • auto（1 1 auto） none（0 0 auto）
    
    
• align-self # 允许单个项目与其他项目不一样的对齐方式，可覆盖容器align-item属性，默认auto