CSS混合布局是指利用多種布局方式，通過靈活的樣式組合實現網頁布局的方法。這種布局方式相比于傳統的基于盒模型的布局方式更加靈活方便，而且可以節省大量的開發時間。

.parent {
display: flex;
align-items: center;
justify-content: space-between;
height: 200px;
background-color: #f0f0f0;
padding: 20px;
}
.left {
width: 200px;
height: 100px;
background-color: #ccc;
}
.right {
flex: 1;
height: 100px;
background-color: #999;
margin-left: 20px;
}

在這個示例代碼中，我們定義了一個具有混合布局的父容器，采用了flex布局的方式。display:flex屬性使得子元素可以被彈性布局，align-items:center屬性定義了子元素在交叉軸上的對齊方式為居中對齊，justify-content:space-between屬性則定義了子元素在主軸上的對齊方式為兩端對齊。在這個布局中，我們還設置了父容器的高度、背景色和內邊距。

接下來，我們定義了兩個子元素，左側的子元素采用了固定的寬度和高度，背景色則為灰色，右側的子元素采用了彈性布局的方式，flex:1屬性相當于flex-grow:1;flex-shrink:1;flex-basis:auto;，它將子元素的初始寬度設置為0，從而使子元素可以根據父容器的可用空間自適應。在這個布局中，右側子元素的背景色為淺灰色，并且設置了一個20px的左邊距。

通過這樣的混合布局，我們可以輕松實現各種復雜的網頁布局效果，例如：頭部固定、中間自適應、底部固定的三欄布局、左右兩側固定、中間自適應的三欄布局等。