flex.css常用属性及解释

flex常用属性

• dir 主轴方向

  dir:top    // 从上到下
  dir:right    // 从右到左
  dir:bottom    // 从下到上
  dir:left    // 从左到右（默认）
  

• main 主轴对齐方式

  main:right    // 从右到左
  main:left    // 从左到右（默认）
  main:justify    // 两端对齐
  main:center    // 居中对齐
  

• cross 交叉轴对齐方式

  cross:top    // 从上到下（默认）
  cross:bottom    // 从上到下
  cross:baseline    // 基线对齐
  cross:center    // 居中对齐
  cross:stretch    // 高度并排铺满
  

• box 子元素设置

  box:mean    // 子元素平分空间
  box:first    // 第一个子元素不要多余空间，其他子元素平分多余空间
  box:last    // 最后一个子元素不要多余空间，其他子元素平分多余空间
  box:justify    // 两端第一个元素不要多余空间，其他子元素平分多余空间
  

举个栗子

<div flex="main:center cross:center" style="width: 200px; height: 200px; background: #888888">
  <div style="background: #FF3939">居中元素</div>
</div>