css竖向排列（css文字竖着排列）

## CSS 竖向排列### 简介在网页布局中，元素默认按照从左到右、从上到下的顺序排列。但有时我们需要将元素竖向排列，例如导航菜单、列表项等。CSS 提供了多种方式实现竖向排列，本文将详细介绍这些方法。### 方法一：使用 `display: flex` 或 `display: inline-flex``flexbox` 布局是实现竖向排列最常用且灵活的方式之一。#### 1. `flex-direction: column`将 `display` 属性设置为 `flex` 或 `inline-flex` 后，可以通过设置 `flex-direction` 属性为 `column` 将元素的主轴方向改为竖直方向，从而实现竖向排列。```css .container {display: flex; /

或 display: inline-flex;

/flex-direction: column; } ```#### 2. `align-items` 和 `justify-content` 控制对齐方式

`align-items`: 控制元素在

交叉轴

（竖向排列时为水平方向）上的对齐方式。

`justify-content`: 控制元素在

主轴

（竖向排列时为垂直方向）上的对齐方式。```css .container {display: flex;flex-direction: column;align-items: center; /

水平居中

/justify-content: space-between; /

垂直方向均匀分布

/ } ```### 方法二：使用 `display: grid``grid` 布局同样可以实现竖向排列，并且更加灵活。#### 1. `grid-template-rows` 定义行使用 `grid-template-rows` 属性可以定义网格的行，从而实现竖向排列。```css .container {display: grid;grid-template-rows: 1fr 1fr 1fr; /

三行，每行占据相同空间

/ } ```#### 2. `grid-auto-flow: column` 自动排列方向默认情况下，`grid` 布局会先填满一行，再开始下一行。 可以使用 `grid-auto-flow: column` 属性将排列方向改为先列后行，实现竖向排列。```css .container {display: grid;grid-auto-flow: column; } ```### 方法三：使用 `writing-mode` 属性 (适用于文本)`writing-mode` 属性可以改变文本的书写方向，从而实现竖向排列。```css .container {writing-mode: vertical-rl; /

从右到左竖排

/ } ```### 方法四：使用 `float` 和 `clear` 属性 (不推荐)`float` 属性可以使元素浮动，通过设置 `float: left` 或 `float: right` ，结合 `clear` 属性清除浮动，也可以实现竖向排列。

注意:

这种方法比较复杂，容易出现问题，不推荐使用。### 总结以上就是几种常见的 CSS 竖向排列方法，其中 `flexbox` 和 `grid` 布局是更加灵活和常用的方法。 选择哪种方法取决于具体的需求和场景。

CSS 竖向排列

简介在网页布局中，元素默认按照从左到右、从上到下的顺序排列。但有时我们需要将元素竖向排列，例如导航菜单、列表项等。CSS 提供了多种方式实现竖向排列，本文将详细介绍这些方法。

方法一：使用 `display: flex` 或 `display: inline-flex``flexbox` 布局是实现竖向排列最常用且灵活的方式之一。

1. `flex-direction: column`将 `display` 属性设置为 `flex` 或 `inline-flex` 后，可以通过设置 `flex-direction` 属性为 `column` 将元素的主轴方向改为竖直方向，从而实现竖向排列。```css .container {display: flex; /* 或 display: inline-flex; */flex-direction: column; } ```

2. `align-items` 和 `justify-content` 控制对齐方式* `align-items`: 控制元素在**交叉轴**（竖向排列时为水平方向）上的对齐方式。 * `justify-content`: 控制元素在**主轴**（竖向排列时为垂直方向）上的对齐方式。```css .container {display: flex;flex-direction: column;align-items: center; /* 水平居中 */justify-content: space-between; /* 垂直方向均匀分布 */ } ```

方法二：使用 `display: grid``grid` 布局同样可以实现竖向排列，并且更加灵活。

1. `grid-template-rows` 定义行使用 `grid-template-rows` 属性可以定义网格的行，从而实现竖向排列。```css .container {display: grid;grid-template-rows: 1fr 1fr 1fr; /* 三行，每行占据相同空间 */ } ```

2. `grid-auto-flow: column` 自动排列方向默认情况下，`grid` 布局会先填满一行，再开始下一行。 可以使用 `grid-auto-flow: column` 属性将排列方向改为先列后行，实现竖向排列。```css .container {display: grid;grid-auto-flow: column; } ```

方法三：使用 `writing-mode` 属性 (适用于文本)`writing-mode` 属性可以改变文本的书写方向，从而实现竖向排列。```css .container {writing-mode: vertical-rl; /* 从右到左竖排 */ } ```

方法四：使用 `float` 和 `clear` 属性 (不推荐)`float` 属性可以使元素浮动，通过设置 `float: left` 或 `float: right` ，结合 `clear` 属性清除浮动，也可以实现竖向排列。 **注意:** 这种方法比较复杂，容易出现问题，不推荐使用。

总结以上就是几种常见的 CSS 竖向排列方法，其中 `flexbox` 和 `grid` 布局是更加灵活和常用的方法。 选择哪种方法取决于具体的需求和场景。