CSS+凝膠布局是目前前端開發中比較常見的一種布局方式，它通過使用 flex 屬性實現彈性布局，為網站提供了更好的響應式設計及適配性。下面就讓我們一起來了解一下這種布局技術。

.gel-layout {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.gel-layout__item {
flex-grow: 1;
flex-basis: calc(50% - 20px);
margin: 10px;
}

以上是 CSS+凝膠布局的核心代碼，可以看出這套布局思路相對簡單。首先設置父元素 display: flex，這樣子元素的排列方式就變成了彈性布局。接著通過 flex-wrap: wrap 決定元素的換行方式，justify-content: space-between 決定橫向排列時元素的間距方式，align-items: center 確認元素縱向排列時的對齊方式。

同時，子元素增加 class="gel-layout__item" 屬性，實現子元素彈性盒子的增長適應性以及自定義元素寬度。此外，在這里通過使用 calc() 函數實現了元素寬度自動計算，從而消除手動計算間距的煩惱。

總之，CSS+凝膠布局是一種十分實用的布局方式，它不需要大量嵌套 div 和復雜的 CSS 設計，而是通過少量簡單的代碼實現了很好的響應式排版效果，并降低了項目開發的難度和復雜度。