小程序Flex布局

小程序中的 Flex 布局作为一种基于 CSS3 Flexbox 的布局方式，非常适合用于构建复杂且灵活的页面结构。

---

一、Flex 布局特点

1. 弹性容器：通过 display: flex 声明容器为 Flex 布局
2. 主轴与交叉轴：默认水平为主轴（row方向），垂直为交叉轴
3. 自动填充：子元素自动按比例分配剩余空间
4. 响应式友好：轻松实现不同屏幕尺寸的适配

---

二、容器属性（父元素）

.container {
   
  display: flex; /* 启用Flex布局 */
  
  /* 主轴方向 */
  flex-direction: row | row-reverse | column | column-reverse;

  /* 主轴对齐方式 */
  justify-content: flex-start | flex-end | center | space-between | space-around;

  /* 交叉轴对齐 */
  align-items: stretch | flex-start | flex-end | center | baseline;

  /* 多行对齐 */
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;

  /* 换行方式 */
  flex-wrap: nowrap | wrap | wrap-reverse;
}

---

三、项目属性（子元素）

.item {
   
  /* 排列顺序 */
  order: 0; /* 数值越小越靠前 */

  /* 放大比例 */