弹性盒模型

老版弹性盒模型：

• display:box;
• display:inline-box;

1. 老版本在使用的时候需要加前缀
2. 块级子元素会在一行显示

• box-orient 定义主轴方向

  • horizontal 水平
  • vertical 垂直

• box-direction 定义元素的排列顺序

  • normal 正序
  • reverse 倒序

• box-pack：主轴方向富裕空间管理

  • start
  • center
  • end
  • justify 平分

• box-align：侧轴（垂直于主轴方向）富裕空间管理

  • start
  • center
  • end

• box-flex 定义子元素的弹性尺寸

• box-ordinal-group 定义子元素的排列顺序

  • 最小值1
  • 默认值1
  • 数值越大排列越靠后

新版弹性盒模型

• display:flex;

1. 使内嵌也支持宽高
2. 继承老版全部功能

• flex-direction：主轴方向设置

  • row 从左向右（默认）
  • row-reverse 从右向左
  • column 从上到下
  • column-reverse 从下到上

• justify-content：主轴对齐

  • flex-start
  • center
  • flex-end
  • space-between 元素之间保持相等距离
  • space-around 元素周围保持相等的距离

• align-items：侧轴（上下、左右）对齐

  • flex-start
  • flex-end
  • center

• flex-wrap：换行

  • wrap 换行
  • nowrap 不换行
  • wrap-reverse 侧轴方向改变

• align-content：行对齐

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

• flex-flow

  • flex-direction
  • flex-wrap

主轴为row或者row-reverse默认侧轴为从上到下，如果添加了wrap-reverse侧轴方向为从下到上；主轴为column或者column-reverse默认侧轴为从左到右，如果添加了wrap-reverse侧轴方向为从右到左。

flex: number|auto|none;

元素的尺寸= 元素的flex/flex之和*父级剩余宽度

order 排序: 数值越大越往后排。默认值 0，可接受负值

flexboxfroggy.com