FlexBox 语法指引

容器属性

• display : flex | inline-flex

  • CSS的columns在伸缩容器上没有效果。
  • float、clear和vertical-align在伸缩项目上没有效果

• flex-direction: row | row-reverse | column | column-reverse

  • 主轴方向

• flex-wrap: nowrap | wrap | wrap-reverse

  • 定义容器单行还是多行
  • 侧轴方向决定了新行方向

• flex-flow: row nowrap

  • flex-direction & flex-wrap的缩写版本

• justify-content: flex-start | flex-end | center | space-between | space-around

  • 定义子元素沿着主轴的对齐方式

• align-items: flex-start | flex-end | center | baseline | streth

  • 定义子元素在当前行侧轴上的对齐方式

• align-content: flex-start | flex-end | center |space-between | space-around | stretch

  • 在只有一行的容器上没有效果，必须多行
  • 处理多行之间在侧轴上的对齐方式

子元素

• order: number

  • 控制显示顺序

• flex-grow: number | 默认为0

  • 定义子元素在容器内向外的扩展能力
  • 可以为负数

• flex-shrink: number | 默认为1

  • 定义子元素收缩的能力
  • 可以为负数

• flex-basis: length | 默认为auto

  • 设置子元素伸缩基准值，剩余空间按比率伸缩

• flex: 0 1 auto | grow shrink basis

  • 是flex-grow & flex-shrink & flex-basis的缩写

• align-self: auto | flex-start | flex-end | center | baseline | stretch

  • 在单独的子元素上覆写默认的对齐方式

• 资料