FlexBox 语法指引

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

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

posted @ 2020-06-11 16:45  10年码农  阅读(106)  评论(0编辑  收藏  举报