低代碼提效的秘密！常見的5種低代碼布局組件介紹

2023-08-15作者：捷碼瀏覽：次

本文將介紹五種布局組件，即流式布局、彈性布局、固定布局、多行多列布局、Layout布局。

流式布局

流式布局也叫百分比布局，也稱非固定像素布局或自適應(yīng)布局。這種布局的特點是隨著屏幕的改變，頁面的布局沒有發(fā)生大的變化，可以進(jìn)行適配調(diào)整，這個正好與響應(yīng)式布局相補。

什么是響應(yīng)式布局？

響應(yīng)式布局指分別為不同的屏幕設(shè)置布局格式，當(dāng)屏幕大小改變時，會出現(xiàn)不同的布局，實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。

流式布局的常用設(shè)計模版如下：

1、左側(cè)固定+右側(cè)自適應(yīng)

2、左右固定寬度+中間自適應(yīng)

在捷碼中如何使用？

基于Layou布局組件，子組件寬高設(shè)置百分比。

彈性布局

彈性布局用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 布局，可以與柵格布局結(jié)合使用。布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現(xiàn)。

什么是盒狀模型？

盒狀模型（Box Model）是CSS中用于布局和定位元素的一種模型。它將每個HTML元素看作是一個矩形的盒子，這個盒子由四個部分組成：內(nèi)容區(qū)域（content）、內(nèi)邊距區(qū)域（padding）、邊框區(qū)域（border）和外邊距區(qū)域（margin）。

在捷碼中如何使用？

基于FlexContainer組件使用，使用場景如下：

1、排列方向

決定主軸的方向，可通過此屬性改變子元素diplay(即顯示方式)。

效果：

2、對齊方式

主軸元素排列(方向)，它可能取5個值，具體對齊方式與軸的方向有關(guān)，下面假設(shè)主軸為從左到右：

效果：

3、換行

默認(rèn)情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

效果：

固定布局

一般用于浮于元素上方，可任意拖動位置，脫離文檔流，生成固定定位的元素，相對于瀏覽器窗口進(jìn)行定位，和absoute的區(qū)別是fixed不會跟隨屏幕滾動(常見的各種貼屏廣告)。

什么是文檔流？

文檔流（Document Flow）是指在HTML文檔中元素按照其出現(xiàn)的順序依次排列的過程。當(dāng)瀏覽器解析HTML文檔時，會根據(jù)元素的標(biāo)簽和屬性確定元素在頁面中的位置，并根據(jù)元素的display屬性來確定元素的顯示方式。

在捷碼中如何使用？

基于FixedContainer、FlexContainer組件使用，適用于在默認(rèn)（static）定位方式、相對（relative）定位方式、絕對（absolute）定位方式、固定（fixed）定位方式等場景下使用。

多行多列布局

多行多列布局本質(zhì)是使元素浮動從而脫離文檔流，結(jié)合css的計算屬性，可以快速將頁面分割成多個布局，可以實現(xiàn)靜態(tài)布局以及自適應(yīng)布局，可嵌套任意元素。

什么是靜態(tài)布局？

靜態(tài)布局是網(wǎng)頁最外層容器有固定的大小，所有的內(nèi)容以該容器為標(biāo)準(zhǔn)，超出寬高的部分用滾動條(overflow:scroll)來實現(xiàn)滾動查閱。

什么是自適應(yīng)布局？

自適應(yīng)布局是指網(wǎng)頁或應(yīng)用程序能夠根據(jù)不同設(shè)備的屏幕尺寸和分辨率自動調(diào)整布局和展示效果的一種設(shè)計方式。其目的是使用戶在不同設(shè)備上可以獲得更好的用戶體驗，無論是在桌面電腦、平板還是手機(jī)上瀏覽頁面，內(nèi)容都能以最合適的方式展示。

自適應(yīng)布局常用設(shè)計模版如下：

1、固定寬度和等比布局