本文將介紹五種布局組件，即流式布局、彈性布局、固定布局、多行多列布局、Layout布局。
01
流式布局
流式布局也叫百分比布局，也稱非固定像素布局或自適應布局。這種布局的特點是隨著屏幕的改變，頁面的布局沒有發生大的變化，可以進行適配調整，這個正好與響應式布局相補。
什么是響應式布局？
響應式布局指分別為不同的屏幕設置布局格式，當屏幕大小改變時，會出現不同的布局，實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。
流式布局的常用設計模版如下：
1、左側固定+右側自適應
2、左右固定寬度+中間自適應
在捷碼中如何使用？
基于Layou布局組件，子組件寬高設置百分比。
02
彈性布局
彈性布局用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 布局，可以與柵格布局結合使用。布局的傳統解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。
什么是盒狀模型？
盒狀模型（Box Model）是CSS中用于布局和定位元素的一種模型。它將每個HTML元素看作是一個矩形的盒子，這個盒子由四個部分組成：內容區域（content）、內邊距區域（padding）、邊框區域（border）和外邊距區域（margin）。
在捷碼中如何使用？
基于FlexContainer組件使用，使用場景如下：
1、排列方向
決定主軸的方向，可通過此屬性改變子元素diplay(即顯示方式)。
效果：
2、對齊方式
主軸元素排列(方向)，它可能取5個值，具體對齊方式與軸的方向有關，下面假設主軸為從左到右：
效果：
3、換行
默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
效果：
03
固定布局
一般用于浮于元素上方，可任意拖動位置，脫離文檔流，生成固定定位的元素，相對于瀏覽器窗口進行定位，和absoute的區別是fixed不會跟隨屏幕滾動(常見的各種貼屏廣告)。
什么是文檔流？
文檔流（Document Flow）是指在HTML文檔中元素按照其出現的順序依次排列的過程。當瀏覽器解析HTML文檔時，會根據元素的標簽和屬性確定元素在頁面中的位置，并根據元素的display屬性來確定元素的顯示方式。
在捷碼中如何使用？
基于FixedContainer、FlexContainer組件使用，適用于在默認（static）定位方式、相對（relative）定位方式、絕對（absolute）定位方式、固定（fixed）定位方式等場景下使用。
04
多行多列布局
多行多列布局本質是使元素浮動從而脫離文檔流，結合css的計算屬性，可以快速將頁面分割成多個布局，可以實現靜態布局以及自適應布局，可嵌套任意元素。
什么是靜態布局？
靜態布局是網頁最外層容器有固定的大小，所有的內容以該容器為標準，超出寬高的部分用滾動條(overflow:scroll)來實現滾動查閱。
什么是自適應布局？
自適應布局是指網頁或應用程序能夠根據不同設備的屏幕尺寸和分辨率自動調整布局和展示效果的一種設計方式。其目的是使用戶在不同設備上可以獲得更好的用戶體驗，無論是在桌面電腦、平板還是手機上瀏覽頁面，內容都能以最合適的方式展示。
自適應布局常用設計模版如下：
1、固定寬度和等比布局
2、等比布局
3、百分比寬度和等比布局
在捷碼中如何設置？
基于多行多列布局組件。可以設置固定像素、百分比、數值，其中數字代表該列在剩余待劃分區域所占的份數，如果所有項目的值都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的值為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。
05
Layout布局
Layout布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
基本結構：
或：
Layout布局容器主要應用于以下場景：
1、擁有側邊導航，區別是兩邊未留邊距，多用于應用型的網站。
2、擁有頂部導航及側邊欄的頁面，多用于展示類網站。
在捷碼中如何設置？
基于Layou布局組件設置：
物聯網+低代碼，遠眺科技助力智慧風電高效應對挑戰! 閱讀751次
低代碼平臺如何讓企業數字化轉型少走彎路？我的實戰觀察 閱讀559次
開封職院低代碼培訓圓滿落幕，校企合作再結碩果 閱讀573次
數字孿生+物聯網+低代碼，遠眺科技賦能智慧消防建設 閱讀980次
點擊“立即申請”即可成為捷碼客戶，將享受捷碼終身技術咨詢服務，和遠程技術支持服務。
400-6565-277
返回列表
熱門推薦
電話：400-6565-277
郵箱：gemcoder@yuantiaotech.com
地址：浙江省杭州市余杭區文一西路1217號IT公園B幢17樓
