小程序 flex布局

flex布局属性

设置父容器 display:flex;

父容器用到的属性

• flex-direction布局方向 row column row-reverse column-reverse 默认row
• justify-content 主轴方法内容布局 (row 主轴就是水平方向 column 主轴就是垂直方向)
  flex-start
  flex-end
  center
  space-between(连接start-end)
  space-around
  space-evenly
• flex-wrap flex单行还是多行 默认nowrap
  nowrap
  wrap
  wrap-reverse
• align-items 交叉轴方向内容布局(单行) (row 交叉轴为上下 column 交叉轴为左右)
  flex-start
  flex-end
  center
  stretch
• align-content 交叉轴方向内容布局(多行) (row 交叉轴为上下 column 交叉轴为左右) 使用方法同justify-content
  flex-start
  flex-end
  center
  space-between(连接start-end)
  space-around

子容器用到的属性

• flex-grow 主轴方向填充 expend 大于1和小于1的情况计算方法不同
• flex-basis 主轴方向的size 优先级比单独设置width height高
• flex-shrink 主轴方向收缩比例控制
• flex ==> flex-grow flex-shrink? | |flex-basis 的缩写

设置flex-grow=1,flex-basis=0则会等分全部子元素