css 弹性布局

/* 弹性布局示例代码 */

/* 定义一个弹性容器 */
.container {
  display: flex; /* 使用弹性布局 */
  justify-content: center; /* 水平居中对齐子元素 */
  align-items: center; /* 垂直居中对齐子元素 */
  height: 300px; /* 设置容器高度 */
  border: 1px solid black; /* 添加边框以便观察布局效果 */
}

/* 定义弹性项目 */
.item {
  width: 100px; /* 设置项目的宽度 */
  height: 100px; /* 设置项目的高度 */
  background-color: lightblue; /* 设置背景颜色 */
  margin: 10px; /* 设置外边距 */
}

解释说明：

• display: flex;：将容器设置为弹性布局，使其内部的子元素（即弹性项目）可以按照弹性布局规则排列。
• justify-content: center;：水平居中对齐弹性项目。
• align-items: center;：垂直居中对齐弹性项目。
• height: 300px;：设置容器的高度，确保有足够空间展示垂直居中的效果。
• border: 1px solid black;：添加边框，方便观察容器和项目的布局情况。
• .item 类定义了弹性项目的基本样式，包括宽度、高度、背景颜色和外边距。