微信小程序布局基础

flex 容器 属性详解

• flex-direction 决定元素的排列方向 (设置主轴和交叉轴的)

  取值：
  row（默认）
  column

• flex-wrap 决定元素如何换行（排列不下时候）

  取值：
  nowrap（默认）
  wrap
  wrap-reverse

• flex-flow flex-direction和flex-wrap的简写

  flex-flow: row warp；(同时设置这两个属性)

• justify-content 决定元素在主轴上的对齐方式

  取值：
  flex-satrt（默认）
  flex-end
  center
  space-around (每个元素在主轴上两边占据的空间相等)
  space-between (两端元素在主轴上靠边对齐，中间元素两边占据的空间相等)

• align-items 决定元素在交叉轴上的对齐方式

  取值：
  flex-satrt（默认）
  flex-end
  center
  stretch (看起来好像和flex-satrt属性效果一样，但是当元素没有设置高度的时候，自动元素的高度是占满整个容器的高度)
  baseline (看起来好像和flex-satrt属性效果一样，是以元素内第一行文字为对齐方式)

flex 元素 属性详解（只能用在每个小的元素里边）

• flex-grow 当有空余空间时，元素的放大比例

  取值： 0 1 2 3 4 ...

• flex-shrink 当空间不足时，元素的缩小比例
  > 取值： 1 0 2 3 4 ...

• flex-basis 元素在主轴上占据的空间
  > 取值： 1 0 2 3 4 ...

• flex 是grow、shrink、basis的简写
  > flex: 1 0 50rpx

• order 定义元素的排列顺序
  > flex: 0 1 2 3 4 ...

• align-self 定义元素自身的对齐方式（会复写掉 justify-content 、align-items 属性）

取值：
auto | flex-start | flex-end | center | baseline | stretch