如何用Flex布局优雅地实现姓名竖排列表？

使用Flex布局可以非常优雅地实现姓名竖排列表。Flex布局的主要优势在于它能够轻松地控制子元素的排列方式、对齐方式以及间距等。以下是一个简单的示例，展示如何使用Flex布局实现姓名竖排列表。

HTML结构

<div class="name-list">
  <div class="name-item">张三</div>
  <div class="name-item">李四</div>
  <div class="name-item">王五</div>
  <div class="name-item">赵六</div>
</div>

CSS样式

.name-list {
  display: flex;
  flex-direction: column; /* 设置主轴方向为垂直方向 */
  align-items: flex-start; /* 左对齐 */
  gap: 10px; /* 设置每个姓名之间的间距 */
}

.name-item {
  writing-mode: vertical-rl; /* 设置文字竖排 */
  text-orientation: upright; /* 保持文字直立 */
  font-size: 16px; /* 设置字体大小 */
  line-height: 1.5; /* 设置行高 */
}

解释

1. display: flex;: 将容器设置为Flex布局。
2. flex-direction: column;: 设置主轴方向为垂直方向，使得子元素（姓名）从上到下排列。
3. align-items: flex-start;: 将子元素左对齐。
4. gap: 10px;: 设置每个姓名之间的间距为10px。
5. writing-mode: vertical-rl;: 设置文字竖排，从右到左排列。
6. text-orientation: upright;: 保持文字直立，避免文字旋转。
7. font-size 和 line-height: 设置字体大小和行高，确保文字显示美观。

最终效果

• 姓名列表会从上到下排列，每个姓名竖排显示，并且左对齐。
• 每个姓名之间会有10px的间距，确保列表看起来整洁有序。

注意事项

• 如果你希望文字从右到左排列，可以使用 writing-mode: vertical-lr;。
• 如果你希望文字旋转90度，可以去掉 text-orientation: upright;，这样文字会旋转90度显示。

通过这种方式，你可以轻松地实现一个优雅的姓名竖排列表。