小程序 框架
组件 表单元素—> 布局 flex 排版（官方建议 可响应式）
div js css 布局排版
微信小程序——Flex布局_小程序

  • 大小 顺序
  • 成员 样式
    微信小程序——Flex布局_css_02微信小程序——Flex布局_块元素_03
  • 更改 成员 属性 样式 动态后台交互

flex 布局 属性

  • 父级元素 定义
    微信小程序——Flex布局_响应式_04
    微信小程序——Flex布局_响应式_05
  • direction 成员元素 方向
    属性 行 列
    微信小程序——Flex布局_响应式_06
  • container 页面
    微信小程序——Flex布局_小程序_07
  • 定义 container flex布局
    微信小程序——Flex布局_css_08
  • 成员 块元素 并 添加样式
    微信小程序——Flex布局_css_09
    微信小程序——Flex布局_小程序_10微信小程序——Flex布局_块元素_11微信小程序——Flex布局_块元素_12
  • 默认排序 从左到右
  • 样式设置
    微信小程序——Flex布局_小程序_13微信小程序——Flex布局_css_14微信小程序——Flex布局_响应式_15微信小程序——Flex布局_块元素_16微信小程序——Flex布局_css_17

·

flex -wrap 换行

微信小程序——Flex布局_块元素_18

  • 平均分配 nowrap 默认不换行
    微信小程序——Flex布局_块元素_19微信小程序——Flex布局_css_20微信小程序——Flex布局_响应式_21微信小程序——Flex布局_块元素_22微信小程序——Flex布局_css_23微信小程序——Flex布局_表单_24
    微信小程序——Flex布局_表单_25微信小程序——Flex布局_css_26
justify -content 对齐方式

微信小程序——Flex布局_表单_27微信小程序——Flex布局_表单_28
微信小程序——Flex布局_css_29微信小程序——Flex布局_表单_30

  • 默认相左对齐

微信小程序——Flex布局_响应式_31微信小程序——Flex布局_块元素_32

微信小程序——Flex布局_表单_33微信小程序——Flex布局_块元素_34

微信小程序——Flex布局_小程序_35微信小程序——Flex布局_表单_36

  • 空白包裹
    微信小程序——Flex布局_块元素_37
    微信小程序——Flex布局_表单_38
  • 间隔空白

块成员 元素

微信小程序——Flex布局_css_39
微信小程序——Flex布局_表单_40微信小程序——Flex布局_css_41
微信小程序——Flex布局_表单_42微信小程序——Flex布局_表单_43

  • width 失效 1 为等比分配
    微信小程序——Flex布局_表单_44微信小程序——Flex布局_块元素_45