flex布局（微信小程序版）

一.felx是什么？

• felx是Flexible Box的缩写，即弹性盒子布局

二.容器属性（container）

• container：采用felx布局的区域称为“容器”

• 容器（container）中的属性：

• 示例所用代码：

• 

• flex-direction:用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向

  1. row:设置主轴从左到右水平方向排列

     

  2. row-reverse:主轴从右向左方向排列

     

  3. colimn:主轴从上到下的垂直方向

     

  4. colimn:主轴从下到上的垂直方向

     

• justify-content: 用于设置项目在主轴上的对齐方式

  1. justify-content:flex-start ：项目对齐到主轴期起点，项目间不留空隙

     

  2. justify-content: flex-end： 项目对齐到主轴期终点，项目间不留空隙

     

  3. justify-content: center：项目在主轴上居中对齐排列，项目间不留空隙，主轴上第一个项目利主轴起点的距离等于最后一个项目离主轴终点的距离

     

  4. justify-content: space-around：每个项目之间的距离相等，第一个项目离主轴起点和最后一个项目离终点的距离为中间项目距离的一般

     

  5. justify-content: space-between：两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等

     

• align-item:设置项目在交叉轴上的对齐方式

  1. align-items: center; 项目在交叉轴的中间位置对齐

     

  2. align-items: flex-start;项目顶部与交叉轴起点对齐

     

  3. align-items: flex-end; 项目底部与交叉轴终点对齐

     

  4. align-items:baseline; 项目的第一行文字的基线对齐

     

三.  总结

• 容器和子元素：
  • Flex 布局包括一个容器和容器内的子元素。容器成为 Flex 容器（Flex container），子元素成为 Flex 项（Flex item）
  • 将容器的 display 属性设置为 flex或 inline-flex 可以创建一个 Flex 容器
• 主轴和交叉轴：
  •  Flex 容器默认水平方向上为主轴（main axis），垂直方向上为交叉轴（cross axis）
  • 主轴上的排列方向由容器的 flex-direction 属性决定（row、row-reverse、column、column-reverse）
  • 通过设置容器的 flex-wrap 属性，可以控制子元素是否换行
• 容器属性：
  • justify-content`控制子元素在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）
  • align-items控制子元素在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）。
  •  flex-direction控制主轴的方向（水平或垂直）
  • flex-wrap 控制是否允许子元素换行