Flex弹性盒子布局

• display:-webkit-flex; -webkit-浏览器的内核 用哪个浏览器加哪个浏览器的前缀
• 采用flex布局的元素成为flex容器 他的所有子元素自动成为容器的成员 称为flex项目
• 主轴方向 于对齐方式
  • display:flex; 水平默认成为主轴 默认从左到右排列 左侧为起点 右侧为终点
  • justify-content: ;对齐方式前缀
  • justify-content:flex-start;默认左对齐
  • justify-content:flex-end;右对齐
  • justify-content:center 居中对齐
  • justify-content:space-between; 两端对齐 每两个项目之间的距离相等 两端对齐

    

  • justify-content:space-around;每一个项目俩侧的距离相等

    

  • justify-content:space-evebly; 每两个项目之间的距离 与边缘项目距离容器之间的距离相等

    

• 交叉轴的对齐方式

  • align-itrms属性定义项目在交叉轴的对齐方式
  • stretch 默认值 当项目未设置高度或为auto时 子元素高度会默认占满父容器的高度
  • align-itrms:flex-start;交叉轴的起点对齐 默认起点在上方
  • align-itrms:flex-end; 与交叉轴的终点对齐
  • align-itrms:center; 与交叉轴中间对齐
  • align-itrms:baseline; 项目的第一行文字基线对齐

• flex-direction 属性决定主轴的方向 即项目的排列方向

  • row 默认值主轴为水平方向 从左往右排
  • flex-direction:row-reverse; 水平方向 从右往左排
  • flex-direction:colume; 主轴变为垂直方向 交叉轴变为水平方向 起点在上侧
  • flex-direction:column-reverse； 主轴为垂直方向起点在下侧

• 换行方式

  • 当容器容器不够时 弹性布局为了课一再同详细方向显示 会默认等比例缩小 适应容器大小 但是如果容器有剩余 则不会放大
  • flex-wrap: ; 属性定义前缀
  • norap 默认值 不换行
  • weap 换行 第一行再上侧
  • wrap-reverse；换行 第一行在下侧
  • align-content: 定义多根轴线的对齐方式 如果项目只有一根轴线 不起作用 如果使用换行需要使用此属性
  • align-content:flex-start; 项目整体于交叉轴的起点对齐
  • align-content:flex-end;项目整体于交叉轴的终点对齐
  • align-content:center;项目整体于交叉点的中间对齐
  • align-content:space-between; 每两行之间的上下距离相等
  • align-content:space-around; 每一行两侧的距离相等
  • align-content:space-evenly; 每一行间隔距离于两侧距离相等
  • 简写方式