微信小程序學(xué)習(xí)day 3：-view（視圖容器）——屬性（邊框樣式）、彈性盒模型-flex、屬性、flex屬性、橫向布局、縱向布局 一、視圖容器——-view 1、在進(jìn)行-view學(xué)習(xí)之前，應(yīng)先了解： 1）屬性（邊框樣式）
格式： ：1px solid red
其中1px可以換成任意像素值，red可以換成任意顏色
2）彈性盒模型-flex
應(yīng)用于容器中，可應(yīng)用于行內(nèi)元素，通俗解釋就是使得元素顯示在一行
具體看代碼展示，注意為了方便查看這里將會加上大小、顏色進(jìn)行區(qū)分！
下面展示一些 代碼片。
// demo.wxml
111
222
333
444
555
未進(jìn)行彈性盒模型的代碼片
// demo.wxss
.out{border: 1px solid green;}
.box{width: 100px;height: 100px;background-color: pink;}
如圖所示：
進(jìn)行了彈性盒模型的代碼片
// demo.wxss
.out{border: 1px solid green;display:flex;}
.box{width: 100px;height: 100px;background-color: pink;}
如圖所示：
,t_70,g_se,x_16)
3）flex-wrap：用于指定彈性盒子的子元素的換行模式 ：為默認(rèn)，彈性容器為單行微信小程序彈性盒子，容易發(fā)生溢出wrap：為多行，溢出部分會被放置到新行wrap：：溢出部分于wrap放置位置相反，即換行時第一行會換到下方
下面展示一些 代碼片。
// demo.wxss
.out{border: 1px solid green;display: flex;flex-wrap: nowrap;}
4)屬性：表示邊距 整體表示法：：10px 10px 10px 10px，分別表示上下左右的邊距分步表示法：-top——上邊距、-right——右邊距、-——下邊距、-left——左邊距
下面展示一些 代碼片。
// demo.wxss
.out{border: 1px solid green;display: flex;flex-wrap: nowrap;}
.box{width: 100px;height: 100px;background-color: pink;margin: 2px 2px 2px 2px;}
如圖所示（是整體表示的方法）：
4）flex屬性——針對于項目屬性：是flex-grow、flex-、flex-basis的簡寫。其默認(rèn)值為 0 1 auto，后面兩項屬性是可以進(jìn)行更改選擇的 flex-grow：項目放大比例，默認(rèn)為0flex-：項目縮小比例，默認(rèn)為1felx-basis：項目占據(jù)空間微信小程序彈性盒子，默認(rèn)為auto
下面展示一些 代碼片。
// demo.wxss
.out{border: 1px solid green;display: flex;flex-wrap: nowrap;}
.box{width: 100px;height: 100px;background-color: pink;margin: 2px 2px 2px 2px;flex: 0 0 100px;}
如圖所示：
2、-view：分為橫向布局、縱向布局 1）依據(jù)以上知識，進(jìn)行橫向布局
下面展示一些 代碼片。
// news.wxml
111
222
333
444
555
// news.wxss
/* 橫向布局 */
.out{border: 1px solid green;display:flex;flex-wrap: nowrap;}
.box{width: 100px;height: 100px;background-color: pink;margin:2px 2px 2px 2px;flex: 0 0 100px;}
如圖所示：
2）-x ：允許橫向滾動
添加后，便可拖動進(jìn)行顯示
// news.wxml
111
222
333
444
555
如圖所示：
3）-left：設(shè)置橫向滾動條位置
// news.wxml
111
222
333
444
555
如圖所示：
4）設(shè)置縱向滾動布局
直接參考代碼塊，異曲同工?。。?/p>
下面展示一些 代碼片。
// news.wxml
111
222
333
444
555
未進(jìn)行彈性盒模型的代碼片
// news.wxss
/* 豎向布局 */
.scroll{height: 350px;}
.box1{width: 100%;height: 100px;background-color: indianred;margin-bottom: 2px;}
如圖所示：