Wix

# 容器属性

# flex-direction —— 定义子元素在主轴的排列方式

  • row：主轴为水平方向，起点在左端。

  • row-reverse：主轴为水平方向，起点在右端。

  • column：主轴为垂直方向，起点在上沿。

  • column-reverse：主轴为垂直方向，起点在下沿。

# flex-wrap —— 定义子元素在一条轴线排不下时如何换行

  • nowrap ：默认值。规定灵活的项目不拆行或不拆列。
  1. img
  • wrap ： 规定灵活的项目在必要的时候拆行或拆列。
  1. 1 αααααααι αααα
  • wrap-reverse ： 规定项目在必要的时候以相反的顺序拆行或拆列。
  1. , 000000 @ 0

# justify-content —— 定义子元素在主轴的对齐方式

img

# align-items —— 定义子元素在纵轴上的对齐方式

text text text text text text

# 项目属性

# flex-grow ——定义项目的放大比例

    • flex-grow: number ;
    • 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。
    • 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

# flex-shrink ——定义了项目的缩小比例

    • flex-shrink: number
    • flex 元素仅在默认宽度之和大于容器的时候才会发生收缩。
    • 如所有项目的 flex-shrink 属性都为1，当空间不足时，将等比例缩小。如一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

# flex-basis ——定义了在分配多余空间之前，项目占据的主轴空间

    • flex-basis: number | auto ;
    • number：长度单位或者百分比，规定灵活项目的初始长度。
    • auto：默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。

# flex —— flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选

    • flex-basis: number | auto
    • 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
    • flex: 1 ; 所有项目等分剩余空间。