在前端開發過程中，我們經常會遇到需要將網頁按照一定比例進行分割的情況。幸運的是，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個部分，我們可以很方便地在網頁上進行布局。我們可以將一行分成多個小塊，通過不同比例的組合，實現我們想要的布局效果。這種方式在響應式頁面設計中也很常見，可以讓我們的頁面適應不同的屏幕尺寸。