1 固定布局 vs 響應(yīng)式布局

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

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

2 響應(yīng)式版塊設(shè)計(jì)方式

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

響應(yīng)式容器在左側(cè)元素-> 容器里，注意選中版塊點(diǎn)擊對應(yīng)的響應(yīng)式容器即可添加容器到版塊里。

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

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

3 彈性布局設(shè)置

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

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

除了橫向排列，縱向排列也一樣設(shè)置。另外父容器也可以直接點(diǎn)擊添加子容器按鈕來新增子響應(yīng)式容器

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

4 常見布局

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

4 元素搭配響應(yīng)式容器

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