css 布局

/* 示例代码：使用 CSS Flexbox 布局 */

/* 容器设置为 Flexbox 布局 */
.container {
  display: flex;
  justify-content: space-between; /* 水平居中并分散子元素 */
  align-items: center; /* 垂直居中对齐 */
  height: 300px; /* 设置容器高度 */
  border: 1px solid #ccc; /* 添加边框以便观察布局效果 */
}

/* 子元素样式 */
.item {
  width: 100px; /* 设置子元素宽度 */
  height: 100px; /* 设置子元素高度 */
  background-color: lightblue; /* 设置背景颜色 */
  text-align: center; /* 文本居中 */
  line-height: 100px; /* 垂直居中文本 */
}

/* 解释说明：
1. .container 是父级容器，使用了 Flexbox 布局，通过 `display: flex` 来启用。
2. `justify-content: space-between` 使子元素在水平方向上均匀分布。
3. `align-items: center` 使子元素在垂直方向上居中对齐。
4. .item 是子元素，设置了固定的高度和宽度，并添加了背景颜色和文本居中样式。
*/