在前端开发过程中，我们经常会遇到需要将网页按照一定比例进行分割的情况。幸运的是，CSS提供了一种简单而又有效的方法可以实现这一功能，这就是将屏幕切12份。

.container {
display: flex;
flex-wrap: wrap;
}
.col-1 {
flex: 0 0 8.33333333%;
max-width: 8.33333333%;
}
.col-2 {
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
}
.col-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
}
.col-5 {
flex: 0 0 41.66666667%;
max-width: 41.66666667%;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
flex: 0 0 58.33333333%;
max-width: 58.33333333%;
}
.col-8 {
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}
.col-9 {
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
flex: 0 0 83.33333333%;
max-width: 83.33333333%;
}
.col-11 {
flex: 0 0 91.66666667%;
max-width: 91.66666667%;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}

上述代码中，我们通过定义12个不同的class，即col-1到col-12，将屏幕的宽度切成12份。其中flex属性控制了每个列的比例，max-width属性控制了每个列最大的宽度。为了实现行内元素水平排列，我们还需要给这些列添加一个父元素，这里我们用了一个名为.container的class，并给它添加了display: flex和flex-wrap: wrap属性。

通过将屏幕切分成12个部分，我们可以很方便地在网页上进行布局。我们可以将一行分成多个小块，通过不同比例的组合，实现我们想要的布局效果。这种方式在响应式页面设计中也很常见，可以让我们的页面适应不同的屏幕尺寸。