css布局1-2-1

在网页设计中，CSS布局是至关重要的一项技术。而1-2-1布局则是其中一种常见的布局方式。

1-2-1布局是指一个页面中有3个主要的内容区块，中央区块占据2个，两侧区块各占据1个。该布局方式可以用以下的HTML和CSS代码来实现：

HTML代码：
<div class="container">
  <div class="left">这里是左侧区块</div>
  <div class="center">这里是中央区块</div>
  <div class="right">这里是右侧区块</div>
</div>

CSS代码：
.container {
  width: 100%;
  display: flex;
}

.left,.right {
  width: 25%;
}

.center {
  flex: 1 0 50%;
}

在HTML中，使用了一个名为“container”的div元素，内部有三个div元素，它们分别有“left”、“center”、“right”的类名，来表示各自的区块。在CSS中，通过display属性设置容器元素的布局方式为flex，这可以使左侧和右侧区块占据页面20%的宽度，而中央区块则占据60%的宽度。这是通过使用flex-grow、flex-shrink和flex-basis这三个属性来实现的。其中，flex-grow设置元素的伸展系数，flex-shrink设置元素的收缩系数，而flex-basis则设置元素的基本大小。

总的来说，1-2-1布局是一种简单而有效的布局方式，适用于大多数网站的设计。它可以帮助开发者实现页面元素之间的平衡和对称，并且对响应式设计也非常友好。