标签导航：

如何使用Flexbox实现“姓名：张三 李四 王二麻”这种垂直排列的网页布局？

flexbox布局：轻松实现垂直排列的网页布局

网页布局中，常常遇到一些特殊的排版需求。例如，如何优雅地将标签与多个项目垂直排列？本文以“姓名：张三 李四 王二麻”为例，讲解如何利用Flexbox实现这种布局。

问题：需要将“姓名”作为标签，并在其右侧垂直排列多个姓名。简单的HTML无法直接实现，需要借助CSS布局能力。

解决方案：使用Flexbox

以下代码利用Flexbox，简洁高效地解决了这个问题：

<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>
<div style="display: flex;">
    <div>姓名：</div>
    <div style="display: flex; flex-direction: column;">
        <p>张三</p>
        <p>李四</p>
        <p>王二麻</p>
    </div>
</div>

代码说明：

  1. * { padding: 0; margin: 0; }：重置全局样式，避免潜在冲突。
  2. display: flex;：将父容器设置为Flex容器。
  3. 内部的第二个div使用flex-direction: column;，强制其子元素（

    标签）垂直排列。

通过Flexbox的特性，我们轻松实现了“姓名”标签与姓名值垂直对齐的布局效果，代码简洁易懂，维护方便。 这种方法是处理此类布局需求的最佳实践。