11 | view容器组件及Flex布局（二）：介绍flex布局中常用的样式及样式值-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

### 第十一章 | View容器组件及Flex布局（二）：介绍Flex布局中常用的样式及样式值

在上一章节中，我们初步探索了微信小程序中的`view`容器组件及其作为Flex布局容器的基础用法。Flex布局，即弹性盒模型（Flexible Box Layout），为开发者提供了一种更加高效、灵活的方式来布局、对齐和分配容器中项目的空间，无论它们的大小是未知还是动态变化的。本章将深入介绍Flex布局中常用的样式属性及其对应的样式值，帮助读者更加熟练地掌握这一强大的布局工具。

#### 1. Flex容器属性

Flex布局首先作用于Flex容器上，通过为容器设置特定的样式属性来控制其子元素（Flex项目）的布局方式。以下是几个关键的Flex容器属性：

##### 1.1 `display: flex | inline-flex;`

- **说明**：这是开启Flex布局的第一步，通过将容器的`display`属性设置为`flex`或`inline-flex`，可以将其转变为Flex容器。`flex`表示块级Flex容器，而`inline-flex`表示行内Flex容器。
- **示例**：
  ```css
  .container {
    display: flex;
  }
  ```

##### 1.2 `flex-direction: row | row-reverse | column | column-reverse;`

- **说明**：此属性定义了Flex容器中子元素的排列方向。`row`（默认值）表示水平方向从左到右排列；`row-reverse`表示水平方向从右到左排列；`column`表示垂直方向从上到下排列；`column-reverse`表示垂直方向从下到上排列。
- **示例**：
  ```css
  .container {
    flex-direction: column;
  }
  ```

##### 1.3 `flex-wrap: nowrap | wrap | wrap-reverse;`

- **说明**：默认情况下，Flex项目都尽量排在一行（或一列）上。`flex-wrap`属性定义了当Flex项目超出容器大小时是否换行以及如何换行。`nowrap`（默认值）表示不换行；`wrap`表示换行，且第一行在上方；`wrap-reverse`表示换行，但第一行在下方。
- **示例**：
  ```css
  .container {
    flex-wrap: wrap;
  }
  ```

##### 1.4 `flex-flow`

- **说明**：`flex-flow`是`flex-direction`和`flex-wrap`的简写形式，允许同时设置这两个属性。
- **示例**：
  ```css
  .container {
    flex-flow: column wrap;
  }
  ```

- **说明**：此属性定义了Flex项目在主轴（main axis）上的对齐方式。主轴的方向由`flex-direction`决定。
- **示例**：
  ```css
  .container {
    justify-content: space-between;
  }
  ```

##### 1.6 `align-items: flex-start | flex-end | center | baseline | stretch;`

- **说明**：此属性定义了Flex项目在交叉轴（cross axis）上的对齐方式。交叉轴的方向垂直于主轴。
- **示例**：
  ```css
  .container {
    align-items: center;
  }
  ```

- **说明**：当Flex项目有多行时，此属性定义了行在交叉轴上的对齐方式。如果只有一行，则此属性不起作用。
- **示例**：
  ```css
  .container {
    align-content: space-around;
  }
  ```

#### 2. Flex项目属性

除了Flex容器属性外，Flex项目（即Flex容器的子元素）也有一系列属性，用于控制其在Flex容器中的具体表现。

##### 2.1 `flex-grow: <number>;`

- **说明**：此属性定义了Flex项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间（如果有的话）。
- **示例**：
  ```css
  .item {
    flex-grow: 1;
  }
  ```

##### 2.2 `flex-shrink: <number>;`

- **说明**：此属性定义了Flex项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的`flex-shrink`属性都为1，当空间不足时，它们将等比例缩小。
- **示例**：
  ```css
  .item {
    flex-shrink: 0; /* 不允许缩小 */
  }
  ```

##### 2.3 `flex-basis: <length> | auto;`

- **说明**：在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
- **示例**：
  ```css
  .item {
    flex-basis: 100px;
  }
  ```

##### 2.4 `flex`

- **说明**：`flex`属性是`flex-grow`、`flex-shrink`和`flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。
- **示例**：
  ```css
  .item {
    flex: 1; /* 等同于 flex: 1 1 0% */
  }
  ```

- **说明**：允许单个Flex项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性值。
- **示例**：
  ```css
  .item {
    align-self: flex-end;
  }
  ```

#### 3. 实战应用

理解了上述Flex布局中的常用样式及样式值后，我们来看几个实战应用的例子，以加深理解。

**例1：响应式布局**

假设我们需要设计一个响应式的导航栏，在小屏幕上水平排列，在大屏幕上垂直排列。

```css
.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
  }
}
```

**例2：等宽卡片布局**

创建一个卡片列表，每个卡片等宽且自动填充剩余空间。

```css
.card-container {
  display: flex;
  justify-content: space-between;
}

.card {
  flex: 1; /* 使得所有卡片等宽 */
  margin: 10px;
  padding: 20px;
  border: 1px solid #ccc;
}
```

**例3：图片与文本对齐**

在一个Flex容器中，实现图片左对齐，文本右对齐的效果。

```css
.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.img-container {
  flex: 0 0 auto; /* 不放大缩小，保持原尺寸 */
  margin-right: 20px;
}

.text-container {
  flex: 1; /* 填充剩余空间 */
  text-align: right;
}
```

通过以上章节的详细讲解，我们深入了解了Flex布局中常用的样式属性及其样式值，并通过实战应用示例展示了如何在微信小程序中灵活运用这些属性来实现复杂的布局需求。希望这些内容能够帮助读者更好地掌握Flex布局，提升开发效率与界面布局的美观度。

该分类下的相关小册推荐：

微信小程序与云开发(中)

微信小程序全栈开发实战(中)

微信小程序与云开发(上)

微信小程序全栈开发实战(下)

微信小程序与云开发(下)

微信小程序底层框架实现原理