CSS3中提供了一種新的高度劃分方式，它可以讓我們更加靈活地控制頁面的樣式和布局。這種方式就是使用flexbox。

flexbox是一種新的布局模式，它可以很方便地實現各種復雜的布局效果。要想使用flexbox，我們只需在父容器上應用display: flex;即可。

.parent {
display: flex;
}

在flexbox中，我們可以使用justify-content來控制子元素在主軸方向上的對齊方式，使用align-items來控制子元素在交叉軸方向上的對齊方式。

.parent {
display: flex;
justify-content: center; /* 在主軸方向上居中 */
align-items: center; /* 在交叉軸方向上居中 */
}

另外，我們還可以使用flex-grow、flex-shrink和flex-basis來設置子元素的高度。其中flex-grow表示子元素在剩余空間中所占比例，flex-shrink表示子元素在空間不足時所占比例，flex-basis表示子元素在初始時的大小。

.child {
flex-grow: 1; /* 在剩余空間中占比例 */
flex-shrink: 0; /* 不縮小 */
flex-basis: 200px; /* 初始大小為200px */
}

flexbox的出現讓我們在頁面布局上有了更多的選擇和靈活性，它是我們開發現代網頁必不可少的一種技術。