css flex布局

/* CSS Flex 布局示例 */

/* 定义一个容器为 Flex 布局 */
.container {
  display: flex;
}

/* 容器内的项目将水平排列，并且中间有间隔 */
.item {
  flex: 1; /* 项目将根据可用空间自动分配宽度 */
  margin: 10px; /* 每个项目之间有10px的间距 */
}

/* 如果需要垂直居中，可以使用以下代码 */
.container-center {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

/* 如果需要换行显示，可以使用以下代码 */
.container-wrap {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
}

解释说明：

• display: flex;：将容器定义为 Flex 布局，其子元素会成为 Flex 项目。
• flex: 1;：使每个项目根据可用空间自动分配宽度，确保它们均匀分布。
• margin: 10px;：为每个项目添加外边距，避免它们紧挨在一起。
• justify-content: center; 和 align-items: center;：分别用于水平和垂直居中对齐。
• flex-wrap: wrap;：允许项目在必要时换行显示，而不是强制在一行内显示。