如何用Flexbox实现姓名标签与多个姓名列表的紧凑垂直排列？

要使用Flexbox实现姓名标签与多个姓名列表的紧凑垂直排列，可以按照以下步骤进行：

1. HTML结构

首先，创建一个包含姓名标签和姓名列表的HTML结构。

<div class="container">
  <div class="label">姓名标签</div>
  <ul class="name-list">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
  </ul>
</div>

2. CSS样式

接下来，使用Flexbox来布局这些元素。

.container {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: flex-start; /* 左对齐 */
  gap: 10px; /* 设置标签和列表之间的间距 */
}

.label {
  font-weight: bold; /* 标签加粗 */
}

.name-list {
  list-style-type: none; /* 移除列表前的圆点 */
  padding: 0; /* 移除默认的内边距 */
  margin: 0; /* 移除默认的外边距 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 5px; /* 设置姓名之间的间距 */
}

3. 解释

• display: flex;：将容器设置为Flexbox布局。
• flex-direction: column;：使子元素垂直排列。
• align-items: flex-start;：使子元素左对齐。
• gap: 10px;：设置标签和列表之间的间距为10px。
• list-style-type: none;：移除列表前的圆点。
• padding: 0; 和 margin: 0;：移除默认的内外边距。
• gap: 5px;：设置姓名之间的间距为5px。

4. 最终效果

最终的效果是姓名标签与姓名列表紧凑地垂直排列，并且姓名列表中的每个姓名之间也有适当的间距。

<div class="container">
  <div class="label">姓名标签</div>
  <ul class="name-list">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
  </ul>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.label {
  font-weight: bold;
}

.name-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

这样，你就可以实现姓名标签与多个姓名列表的紧凑垂直排列了。