基本概念

• 主轴： main axis

  • 主轴起点： main start
  • 主轴终点： main end

• 交叉轴（侧轴）： cross axis

  • 交叉轴起点： cross start
  • 交叉轴终点： cross end

• container和item，这两个不翻译最直白，叫容器和项目有点别扭

生成弹性盒

• display: flex 生成块盒
• inline-flex 生成行内盒

container属性

• flex-direction

  • 定义container主轴方向
  • 可选值： row | row-reverse | column | column-reverse
  • 默认值： row

• flex-wrap

  • 控制container为单行还是多行，定义了侧轴的方向，控制多行时向哪个方向堆砌
  • 可选值：nowrap | wrap | wrap-reverse
  • 默认值：nowrap

• flex-flow

  • flex-direction 和 flex-wrap的简写，这两个属性加起来就可以控制弹性盒内item的布局流向了
  • 默认值： row nowrap

• justify-content

  • 设置container内所有item沿主轴上的对齐方式，并分配剩余可用空间。
  • 如果主轴横向，侧轴竖向， justify-content就是控制所有item在横向的位置布局。
  • 可选值：flex-start | flex-end | center | space-around | space-between
  • 默认值： flex-start

• align-items

  • 设置container内所有item在侧轴上的对齐方式
  • 可选值： flex-start | flex-end | center | baseline | stretch
  • 默认值： stretch
  • item可以通过设置align-self覆盖container的align-items属性

• align-content

  • 定义多根轴线之间的对齐方式，并分配剩余可用空间。若没有多根轴线，则不起作用
  • 可选值： flex-start | flex-end | center | space-around | space-between | stretch
  • 默认值： stretch

item属性

• align-self

  • 设置item在侧轴方向的对齐方式，功能与align-items相同。可覆盖align-items属性。
  • 可选值： auto | flex-start | flex-end | center | baseline | stretch
  • 默认值：auto

• order

  • 设置item的序数顺序，值越小，越靠前
  • 默认值： 0

• flex-grow

  • 设置item的增长因数，不接受负值。
  • 按比例分配剩余空间，没有剩余空间时flex-grow无效
  • 默认值： 0

• flex-shrink

  • 设置item的收缩因素，不接受负值
  • 每个item按比例缩小，使总缩小空间为不足的空间，空间足够时flex-shrink无效
  • 默认值：1

• flex-basis

  • 设置item伸缩的基准值，不接受负值
  • 默认值： auto 类似于width

• flex

  • 设置item的尺寸，包括flex-grow、flex-shrink、flex-basis
  • 默认值： 0,1,auto

示例

这里看更宽敞>>

应用

这里看更宽敞>>

参考

• CSS 弹性盒子布局
• 使用 CSS 弹性盒子
• 使用弹性盒子进行高级布局
• 使用flexbox来布局web应用
• box-sizing