flex布局

.container {
display: flex;
justify-content: center;
align-items: center;
}

要使用Flex布局，首先需要将容器元素设置为display: flex;。这将使容器成为一个Flex容器，并将其子元素（项目）转换为Flex项目。

以下是一些常用的Flex布局属性：

• flex-direction：控制Flex项目在容器中的排列方向，可以是row（水平方向，默认值）、column（垂直方向）、row-reverse（反向水平方向）或column-reverse（反向垂直方向）。
• justify-content：控制Flex项目在主轴上的对齐方式，可以是flex-start（靠左对齐，默认值）、flex-end（靠右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（项目周围间隔相等）或space-evenly（项目和间隔均匀分布）。
• align-items：控制Flex项目在交叉轴上的对齐方式，可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（垂直居中对齐）、baseline（基线对齐）或stretch（拉伸以填充容器高度，默认值）。
• flex-wrap：控制Flex项目是否换行，可以是nowrap（不换行，默认值）、wrap（换行）或wrap-reverse（反向换行）。
• align-content：控制多行Flex项目在交叉轴上的对齐方式，仅在存在换行时生效，可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（垂直居中对齐）、space-between（两端对齐，行之间间隔相等）、space-around（行周围间隔相等）或stretch（拉伸以填充容器高度，默认值）。