掌握CSS Flexbox布局

CSS Flexbox是一种现代布局技术，它使得在不同屏幕尺寸上创建灵活的布局变得简单。以下是Flexbox的基本用法：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

.item {
  flex: 1; /* 弹性增长因子 */
}

在HTML中，你可以这样使用：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

这段代码将创建一个容器，其中包含三个弹性项，它们将自动调整大小以适应容器的可用空间，并且水平和垂直居中。flex属性值1意味着每个项将平等地分配额外的空间。通过调整flex值，你可以控制每个项相对于其他项的伸缩能力。