flex布局

概念

  • 主轴
  • 垂直轴

  • flex container

  • flex item

默认行为

flex item的默认行为:

  • 按行排列 flex-direction: row;
  • 沿着主轴起始边界开始排列 justify-content: flex-start;
  • 主轴方向不会膨胀,但会缩小 flex-grow: 0; flex-shrink: 1; flex-basis: auto;
  • 垂直轴会膨胀填满空间 align-items: stretch;
  • flex-basis: auto;
  • flex-wrap: nowrap;

属性默认值,可选值

flex container

  • flex-direction: row;
  • flex-wrap: nowrap; (wrap)
  • align-items: stretch; (flex-start, flex-end, center)
  • justify-content: flex-start; (flex-end, center, space-around, space-between, space-evenly)

flex item

  • flex-basis: auto; (inherit, initial, unset)
  • flex: initial; (= 0 1 auto) (auto = 1 1 auto, none = 0 0 auto)