CSS數學伸縮布局作為前端開發的一種常見技術，旨在實現響應式設計和布局，讓頁面在不同尺寸的屏幕上自適應地展示。下面我們來詳細介紹一下這一技術的圖解。

.wrapper {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
@media (max-width: 768px) {
.wrapper {
flex-wrap: wrap;
justify-content: center;
}
}
.box {
width: calc(25% - 10px);
background-color: #ccc;
margin: 5px;
}
@media (max-width: 768px) {
.box {
width: calc(33.33% - 10px);
}
}

從上面的代碼可以看出，我們使用了一個名為"wrapper"的flex容器，該容器內有若干個子元素，每個子元素都是"class"為"box"的盒子。我們使用flex屬性來實現伸縮布局，其中"align-items"是用來指定子元素在交叉軸上的對齊方式，"justify-content"是用來指定子元素在主軸上的對齊方式，"space-between"表示子元素之間均勻分布。

在響應式的設計中，我們通過媒體查詢@media來實現不同尺寸下的排布變化。上述代碼中，我們設定當屏幕寬度小于等于768px時，容器的布局方式為換行，并將子元素在主軸上居中對齊。同時，通過改變子元素的寬度，實現了不同尺寸下的排布效果。

總的來說，CSS數學伸縮布局的圖解就是通過flex屬性和媒體查詢@media，實現了主軸和交叉軸上的子元素自適應排布。通過對flex屬性和@media的靈活運用，我們可以實現不同尺寸下的響應式設計及自適應布局，提升網頁在不同設備上的展示效果。