1 固定布局 vs 響應式布局

默認平臺采取固定布局來設計自由版塊，包括自由設計詳情頁及系統(tǒng)列表頁等。固定布局組件相對版塊左上角坐標定位，用戶可以通過拖拽的方式所見即所得的設計版塊，大大降低了設計難度。但固定布局在處理動態(tài)寬高的時候有所不足，例如自由設計詳情版塊時內容區(qū)高度自適應變化，目前的固定布局雖然有動態(tài)計算高度，但部分常見存在誤差且可能有頁面刷新組件位置閃動的問題，體驗不夠好。還有諸如選項卡不同選項內容高度差異、系統(tǒng)列表分頁高度自適應等問題，需要借助響應式布局版塊來優(yōu)化。

響應式布局能根據設置的彈性布局動態(tài)排列組件位置，包括屏幕多分辨率自適應、等比例多列布局、高度自適應等，響應式布局默認支持，系統(tǒng)內置版塊均采取響應式布局方式。響應式布局需要對布局渲染方式有一定了解，設計方式與固定布局有所差異

2 響應式版塊設計方式

對支持響應式布局的版塊在設置里選擇布局模式為響應式布局即可，需要注意的是響應式版塊必須搭配響應式容器才能實現響應式布局，否則直接拖拽元素到響應式版塊里無法控制布局及自適應高度。

響應式容器在左側元素-> 容器里，注意選中版塊點擊對應的響應式容器即可添加容器到版塊里。

響應式容器支持嵌套，因此可以選擇任意一個響應式容器繼續(xù)點擊添加其他響應式布局容器，如果嵌套較多可以通過左側頁面視圖來選中父容器

選中某個響應式容器，點擊即可添加現有元素，例如文章列表，注意如果需要動態(tài)高度，容器和里面的組件不能設置固定高度，如此處文章列表需要刪除高度：

3 彈性布局設置

彈性容器有布局相關的設置，包括排列方向、主軸和交叉軸的對齊方式?？梢酝ㄟ^切換不同的設置來觀察渲染的差異(如果出現顯示異常，可以保存刷新頁面)。例如常見的等分多列布局，可以設置水平排列，里面的響應式容器設置統(tǒng)一的彈性比例即可

如果要實現多列等比例布局，則按照比例設置響應式容器內的響應式容器彈性比例即可，例如1：3：5等比三列布局，給響應式容器下面的三個子響應式容器分別設置彈性比例1、3、5即可，實際展現的時候容器會分別以對應的比例寬度展示。

除了橫向排列，縱向排列也一樣設置。另外父容器也可以直接點擊添加子容器按鈕來新增子響應式容器

容器也支持邊框、間距等設置，可以控制不同容器之間的的間距等。另外還可以設置固定寬高并設置超出滾動來實現滾動布局

4 常見布局

默認元素里面已經添加了常見的橫向、縱向等布局，包括一拖二等布局，可以通過容器嵌套來實現豐富的布局樣式。以詳情頁為示例，如圖可以通過響應式容器的組裝來實現百家號詳情頁的樣式：

4 元素搭配響應式容器

元素可以點擊添加或者ctrl+ x剪切后ctrl + v粘貼到選中的響應式容器里，另外元素也可以搭配響應式容器實現一些特殊的自適應效果，例如選項卡容器，不同的選項卡高度自適應，只需要將選項卡放置在響應式容器里，去掉選項卡本身的高度，同時不同的選項外層用響應式容器包裹即可。