css布局

/* 示例代码：使用Flexbox进行简单的CSS布局 */

/* 容器设置为Flex布局 */
.container {
  display: flex;
  justify-content: space-between; /* 子元素之间留有空隙 */
  align-items: center; /* 垂直居中对齐 */
  padding: 20px;
}

/* 子元素样式 */
.item {
  flex: 1; /* 每个子元素占据相等的空间 */
  margin: 10px;
  background-color: #f0f0f0;
  text-align: center;
  padding: 20px;
}

/* 如果屏幕宽度小于600px，子元素变为垂直排列 */
@media (max-width: 600px) {
  .container {
    flex-direction: column; /* 改变主轴方向为垂直 */
  }
}

解释说明：

• .container：定义了一个Flex容器，使用display: flex使内部的子元素按照Flex布局规则排列。justify-content: space-between用于在子元素之间分配空间，而align-items: center则确保子元素在垂直方向上居中对齐。
• .item：每个子元素通过flex: 1来平均分配容器中的空间，并且设置了内边距、外边距和背景色以美化外观。
• 媒体查询：当屏幕宽度小于600px时，容器的主轴方向会从水平变为垂直（flex-direction: column），使得子元素垂直排列，适应小屏幕设备。

如果你需要更多关于CSS布局的帮助，请随时告诉我！