之前我利用浮木云搭建了一些簡單的頁面，并形成一些簡單的記錄驶臊，表明這個(gè)原型設(shè)計(jì)平臺(tái)能夠快速做好一個(gè)頁面挪挤，但是在頁面設(shè)計(jì)過程中涉及的一些更加細(xì)致化的東西還需要深入去研究。接下來关翎，我會(huì)從浮木云的基礎(chǔ)的部分--容器進(jìn)行研究了解扛门，本次針對(duì)彈性容器&布局容器進(jìn)行簡單的記錄。

1.?彈性容器

浮木云中的彈性容器采用彈性布局,彈性布局使父容器能夠調(diào)節(jié)子組件的寬度/高度和排列順序纵寝，從而能夠更好地填充可用空間论寨。

1.1.?樣式配置

（1）布局樣式：彈性容器的布局樣式包括寬度、高度爽茴、定位方式葬凳、是否自動(dòng)換行、橫向?qū)R室奏、縱向?qū)R沮明、水平溢出、垂直溢出窍奋、內(nèi)外邊距。

寬度、高度：彈性容器的寬度琳袄、高度的表示單位有三種方式：百分比江场、px和自適應(yīng)，百分比就是容器的寬度或者高度占據(jù)頁面的比例窖逗，自適應(yīng)是容器本身適應(yīng)容器內(nèi)的內(nèi)容填充址否，隨著內(nèi)容的增多容器也會(huì)在高度和寬度上發(fā)生相應(yīng)的變化。

定位方式：定位方式有兩種碎紊，每種定位方式都有特定的作用與優(yōu)勢(shì)佑附，其中相對(duì)定位的參考物是容器的初始位置，第二種定位方式的參考物是包裹容器的容器的左上頂點(diǎn)仗考。如下圖音同，我分別在兩個(gè)彈性容器中放置了一個(gè)文字組件和一個(gè)彈性容器，對(duì)于這個(gè)內(nèi)嵌的彈性容器分別設(shè)置不同的定位方式秃嗜，如下圖所示权均，會(huì)發(fā)現(xiàn)兩個(gè)內(nèi)嵌的彈性容器的位置有所不同。

自動(dòng)換行：自動(dòng)換行控制彈性容器的內(nèi)容是放置在一行還是多行锅锨。

橫向?qū)R：是容器中的組件內(nèi)容橫向方向的對(duì)齊方式叽赊，包括左對(duì)齊、右對(duì)齊必搞、居中對(duì)齊必指、兩端對(duì)齊、等距對(duì)齊恕洲、等外邊距對(duì)齊塔橡。

縱向?qū)R：是容器中的組件內(nèi)容縱向方向的對(duì)齊方式，包括靠上對(duì)齊研侣、靠下對(duì)齊谱邪、居中對(duì)齊、底線對(duì)齊庶诡。

水平溢出：容器的組件內(nèi)容寬度超過了容器的寬度惦银，水平溢出設(shè)置“隱藏”，內(nèi)容超出的部分將不會(huì)被看到末誓，設(shè)置為“滾動(dòng)”扯俱，頁面橫向會(huì)發(fā)生滾動(dòng)。

垂直溢出：同水平溢出喇澡，容器的組件內(nèi)容高度超出了容器的高度迅栅，設(shè)置“隱藏”，超出的內(nèi)容會(huì)被隱藏晴玖，設(shè)置為“滾動(dòng)”读存，頁面縱向會(huì)發(fā)生滾動(dòng)为流。

內(nèi)外邊距：外間距是設(shè)置容器外側(cè)跟父級(jí)容器的間距，內(nèi)間距是設(shè)置容器內(nèi)側(cè)的組件內(nèi)容之間的間距让簿。

（2）背景樣式：彈性容器的背景樣式包括背景陰影敬察，背景圖片，背景顏色尔当，顯示邊框莲祸，顯示顏色，盒子邊框

背景陰影：背景陰影其實(shí)就是給容器設(shè)置陰影椭迎，讓整個(gè)內(nèi)容布局更有立體感锐帜，包括基礎(chǔ)投影和淺色投影。

背景圖片：通過上傳合適的圖片設(shè)置對(duì)應(yīng)的圖片背景畜号。

顯示邊框：默認(rèn)情況下是不顯示邊框的缴阎，可以根據(jù)實(shí)際需求讓容器的邊框是否顯示在頁面上。下圖是彈性容器顯示邊框的例子弄兜。

邊框樣式：當(dāng)顯示邊框時(shí)药蜻，對(duì)容器的邊框設(shè)置符合需求的樣式，可以是實(shí)線替饿、點(diǎn)狀语泽、雙線、虛線视卢。

邊框顏色：顯而易見踱卵，就是對(duì)容器的邊框設(shè)置合適的顏色。

盒子邊框：內(nèi)層的數(shù)值是設(shè)置容器邊框線的粗細(xì)据过，四角的數(shù)值是設(shè)置容器的圓角惋砂，可根據(jù)自己的實(shí)際需求調(diào)整相應(yīng)的數(shù)值。

1.2.?屬性配置

屬性配置包括組件名稱和是否隱藏绳锅。

組件名稱：給彈性容器命名西饵，這里要強(qiáng)調(diào)一下，由于我們的頁面會(huì)包含多個(gè)容器鳞芙，因此務(wù)必一定要給容器命名眷柔，便于后續(xù)快速定位相應(yīng)的容器進(jìn)行相應(yīng)的樣式修改或?qū)傩孕薷模瑫r(shí)在交互編排時(shí)也便于查找原朝。

是否隱藏：根據(jù)需要決定容器是隱藏還是顯示驯嘱，若隱藏，容器內(nèi)的內(nèi)容全部被隱藏喳坠。

2.?布局容器

「浮木云」中的「布局容器」采用「塊級(jí)布局」鞠评，無論子組件尺寸如何，它都會(huì)獨(dú)占一行的空間壕鹉；一般來說剃幌，當(dāng)需要內(nèi)部子組件縱向排列時(shí)使用「布局容器」聋涨。

布局容器的樣式配置和彈性的容器的樣式配置和屬性配置幾乎無差別，只是彈性容器的樣式配置多了一個(gè)是否自動(dòng)換行负乡，所以這里對(duì)彈性容器的樣式配置不過多介紹牛郑。

3.?區(qū)別

在原型設(shè)計(jì)過程中是選擇彈性容器還是布局容器呢？我做了一個(gè)示例圖敬鬓，大家就可以看出他們區(qū)別。

上圖我放置了兩個(gè)容器笙各，一個(gè)是布局容器钉答，一個(gè)是彈性容器，在不同容器中分別放置了文字杈抢、面包屑和頭像三個(gè)基礎(chǔ)組件数尿，在布局容器中組件呈縱向分布，彈性容器中組件呈橫向分布惶楼。在彈性容器的【樣式配置】中將“自動(dòng)換行”改成是右蹦，彈性容器中的組件呈現(xiàn)形式跟布局容器的組件形式是一樣的。

看到這里大家是不是覺得布局容器有些多余歼捐，其實(shí)不然何陆，布局容器可以強(qiáng)制每個(gè)組件縱向排列，而彈性容器即使你設(shè)置了自動(dòng)換行豹储，如果放置的組件寬度沒有達(dá)到容器的實(shí)際寬度贷盲，組件內(nèi)容是無法滿足自動(dòng)換行的。如下圖：

我將容器設(shè)置為自動(dòng)換行剥扣，但是兩個(gè)文字組件依然在同一行巩剖，所以，大家在制作頁面時(shí)一定要根據(jù)自己的實(shí)際需求選擇合適的容器钠怯，從而確保頁面簡潔美觀佳魔。只有框架定義好了，后續(xù)才不會(huì)出現(xiàn)大錯(cuò)誤晦炊。