css3弹性盒子flex实现三栏布局的实现

首先，我们需要了解什么是CSS3弹性盒子布局（flexbox）。它是一种新的布局方式，可以更方便、快速地实现复杂的布局效果，尤其适用于响应式布局和移动端开发。

下面是实现三栏布局的步骤：

1. 设置容器的display为flex

将三个元素（左栏、中栏、右栏）包裹在一个容器中，并将容器的display设置为flex，这样它们就成为了flex布局下的一组弹性盒子。

.container {
  display: flex;
}

1. 设置元素的flex属性

默认情况下，弹性盒子的子元素会自动平均分配宽度，但我们需要的是左栏和右栏宽度固定，中栏自适应宽度。因此，我们可以设置左栏和右栏的宽度固定，中栏的宽度设为1，表示将剩余空间平分给中栏。

.left, .right {
  width: 200px;
}
.middle {
  flex: 1;
}

1. 设置弹性盒子的对齐方式

当容器内的元素宽度不足时，我们需要将它们水平或垂直对齐。通过设置弹性盒子的justify-content和align-items属性，我们可以实现水平和垂直对齐，下面是一些常用的对齐方式。

/* 水平居中对齐 */
.container {
  display: flex;
  justify-content: center;
}

/* 垂直居中对齐 */
.container {
  display: flex;
  align-items: center;
}

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

下面是两个示例：

示例1：左右定宽，中间自适应宽度

HTML代码：

<div class="container">
  <div class="left">左栏</div>
  <div class="middle">中栏</div>
  <div class="right">右栏</div>
</div>

CSS代码：

.container {
  display: flex;
}
.left, .right {
  width: 200px;
}
.middle {
  flex: 1;
}

示例2：水平居中对齐

HTML代码：

<div class="container">
  <div>左栏</div>
  <div>中栏</div>
  <div>右栏</div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
}