Flex的API

在父项目上的可添加的属性

父属性必须拥有display:flex这一项 负责所有属性不起作用

• flex-direction 决定主轴的方向
  1. row水平向右
  2. row-reverse 水平向左
  3. column 垂直向下
  4. column-reverse垂直向上
• justily-content 设置主轴上子元素的排列方式
  1. flex-start 主轴方向从头到尾
  2. flex-end 侧轴方向从尾到头排列
  3. center 在主轴居中对齐
  4. space-around 平分剩余空间
  5. space-between 先两边贴边，在平分剩余空间
  6. space-evenly 每个子项目的间隔相等包裹贴边
• align-items 设置侧轴上子元素的排列方式（单行）
  1. flex-start 侧轴方向从头到尾排列
  2. flex-end 侧轴方向从尾到头排列
  3. center 侧轴剧中排列
  4. stretch 如果项目未设置高度，则会自己拉伸到父项的高度
  5. baseLine 项目的第一行文字的基线对齐
• align-content 设置侧轴上子元素的排列方式（多行）
  1. flex-start 侧轴方向从头到尾排列
  2. flex-end 侧轴方向从尾到头排列
  3. center 侧轴剧中排列
  4. space-around 子项在侧轴平分剩余空间
  5. space-between 子项在侧轴先贴向两边，在平分剩余空间
  6. stretch 如果项目未设置高度，则会自己拉伸到父项的高度
  7. space-evenly 每一行元素都完全上下等分。
• flex-wrap 设置子元素是否换行
  1. wrap
  2. nowrap
  3. wrap-reverse

在子项目上可添加的属性

• flex 分配剩余空间 值为0-9999
• align-self
  1. auto 自动
  2. flex-start 从头到尾
  3. flex-end 从尾到头
  4. center 居中
  5. baseline 项目的第一行文字的基线对齐
  6. stretch 拉伸