如何使用Flexbox布局

使用Flexbox布局可以轻松地实现灵活的、自适应的页面布局。Flexbox是一种强大的CSS布局模型，它使得在一个容器中排列元素变得简单。

以下是使用Flexbox布局的示例代码：

.container {
  display: flex; /* 将容器设置为Flexbox布局 */
  flex-direction: row; /* 水平排列子元素 */
  justify-content: space-between; /* 将子元素在容器中水平对齐，并在它们之间留出空间 */
  align-items: center; /* 将子元素在容器中垂直居中对齐 */
}

.container .item {
  flex: 1; /* 将所有子元素设置为相同的宽度 */
  text-align: center; /* 将文本居中对齐 */
}

在上面的代码中，.container是一个Flexbox容器，它包含多个.item子元素。使用display: flex属性将.container设置为Flexbox布局。使用flex-direction属性将子元素水平排列，使用justify-content属性将子元素在容器中水平对齐，并在它们之间留出空间。使用align-items属性将子元素在容器中垂直居中对齐。

使用flex属性将所有.item子元素设置为相同的宽度。这使得它们在容器中均匀分布，从而实现自适应的页面布局。使用text-align属性将文本居中对齐。

您可以根据需要调整这些属性，以实现不同的Flexbox布局效果。