CSS学习笔记（flex 伸缩布局 ），那些年我们一起踩过算法与数据结构的坑

/* 设置一个容器使用伸缩布局 */
.container {
  display: flex; /* 设置为伸缩容器 */
  flex-direction: row; /* 设置主轴方向为水平 */
  justify-content: flex-start; /* 项目沿主轴起始端对齐 */
  align-items: center; /* 项目沿交叉轴居中对齐 */
  height: 100px; /* 设置容器高度 */
  background-color: #f0f0f0; /* 设置背景色 */
}
 
/* 设置伸缩项目 */
.item {
  flex: 1; /* 项目占据等分的空间 */
  margin: 8px; /* 项目之间的间隔 */
  text-align: center; /* 文字居中对齐 */
}
 
/* 设置特定项目的样式 */
.item:first-child {
  flex-grow: 2; /* 第一个项目的放大比例是其他项目的两倍 */
  background-color: #ffcccc; /* 设置背景色 */
}
 
.item:last-child {
  flex-basis: 150px; /* 最后一个项目的基准宽度 */
  background-color: #ccffcc; /* 设置背景色 */
}

这段代码展示了如何使用CSS的伸缩布局（flexbox）来创建一个简单的水平排列的容器，其中包含三个伸缩项目。第一个项目比其他项目大两倍，最后一个项目有一个固定宽度。这是一个很好的入门级示例，展示了伸缩布局的基本属性和概念。