原子化css实现flex竖向布局

原子化CSS是一种将样式规则拆分成小的、可重用的名的方法，以实现快速、活地构建布局和样式。而Flex布局一种强大CSS布局模型，可以实现灵活的盒子模布局。

要实现Flex竖向布局，可以使用原子化CSS的类名来定义相关的样式规则。以下一个示例：

1. 首先，我们定义一个用于设置Flex容器的类名，比如`.flex-container`，可以使用`display: flex`启用Flex布局：

.flex {
  display: flex;
}

2. 接下来，我们可以定义一个用于设置Flex项目的类，比如`.flex-item`，可以使用flex-direction: column`来实现竖向布局：

.flex-item {
  flex-direction: column;
}

3. 如果需要设置项目在主轴上的对齐方式，可以使用类似`.justify-center`、`.justify-start`、`.justify-end`等类名来设置`justify-content`属性：

.justify-center {
  justify-content: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

4. 同样地，如果需要设置项目在交叉轴上的对齐方式，可以使用类似`.align-center`、`.align-start`、`.align-end`等类名来设置`align-items`属性：

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

通过组合这些类名，可以实现灵活的Flex竖向布局。例如，要创建一个居中对齐的竖向布局，可以将`.flex-container`、`.flex-item`、`.justify-center`和`.align-center`这些类名应用于相应的元素。