css三段式flex布局原理

使用CSS进行布局的时候，我们常常会使用flex布局。flex布局基于父元素和子元素的关系，将父元素分为三段，并分别定义了这三段的属性。

flex布局的三段式分别是左侧自适应区域、中间自适应区域和右侧自适应区域。其中左侧自适应区域、右侧自适应区域的宽度由内容撑开，中间自适应区域会占用剩下的所有宽度，从而实现了独特的三段式布局。

具体的实现代码如下：

.parent {
  display: flex;
}

.left {
  flex: 1;
}

.middle {
  flex: 1;
}

.right {
  flex: 1;
} 

我们通过display: flex;将父元素定义为flex容器，并使用flex属性控制子元素的宽度分配。其中left、middle和right分别代表了三个自适应区域，通过flex:1;来将宽度分配给子元素。

需要注意的是，当子元素没有内容时，左侧自适应区和右侧自适应区会自适应宽度，而中间自适应区域会显示为无宽度。因此在实际使用中需要根据情况进行调整，如设置最小宽度或添加默认内容等。