css grid布局和flex布局

/* CSS Grid 布局示例 */
.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建一个三列的网格，每列宽度相等 */
  grid-gap: 10px; /* 网格项之间的间距为10px */
}

.item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

/* CSS Flex 布局示例 */
.container-flex {
  display: flex;
  flex-wrap: wrap; /* 当内容超出容器宽度时换行 */
  justify-content: space-between; /* 子元素之间留有间隔 */
}

.item-flex {
  flex: 1 1 30%; /* 每个子元素占据30%的宽度，并且可以伸缩 */
  margin-bottom: 10px;
  background-color: lightcoral;
  padding: 20px;
  text-align: center;
}

解释说明

CSS Grid 布局

• .container-grid 使用 display: grid 来定义一个网格容器。
• grid-template-columns: repeat(3, 1fr) 创建了一个三列的网格，每列的宽度相等（1fr 表示一个分数单位）。
• grid-gap: 10px 设置了网格项之间的间距为10px。

CSS Flex 布局

• .container-flex 使用 display: flex 来定义一个弹性容器。
• flex-wrap: wrap 允许子元素在容器宽度不足时自动换行。
• justify-content: space-between 将子元素在主轴方向上均匀分布，两端对齐。
• .item-flex 中的 flex: 1 1 30% 表示每个子元素占据30%的宽度，并且可以根据需要伸缩。