常用的布局基本都是通過(guò)flex屬性來(lái)完成的。
這里簡(jiǎn)單的說(shuō)一下自己經(jīng)常用到的一些布局屬性。
不過(guò) box-sizing: border-box / margin / padding 這種很基礎(chǔ)的就不寫(xiě)了许帐。
-
固定定位和相對(duì)定位
經(jīng)常用到的有：
固定定位 —> position: fixed
絕對(duì)定位 —> position: absolute
相對(duì)定位 —> position: relative
其中fiexd屬性與absolute屬性很像铣卡，但是還是有所區(qū)別的铺厨。
簡(jiǎn)單的說(shuō)，你要在整個(gè)窗口上固定一個(gè)控件的位置颈走，那就用fixed膳灶，如果你要在某個(gè)A控件內(nèi)固定B控件的位置，那么A控件就設(shè)置absolute立由，B控件就設(shè)置relative
具體的詳細(xì)解釋可以看這里：CSS中position屬性( absolute | relative | static | fixed )詳解
-
設(shè)置類(lèi)似瀑布流的控件
具體的樣式如下：
每個(gè)重復(fù)單位的屬性如下轧钓，主要還是 display: inline-block; 這個(gè)屬性。
而寬和高在這里寫(xiě)固定值就是為了讓它每行四個(gè)（以i6為模板）
.eightBtn_wrap {
display: inline-block;
width: 180rpx;
height: 220rpx;
}
這個(gè)內(nèi)容就是不定長(zhǎng)的锐膜，長(zhǎng)度就會(huì)隨著內(nèi)容自動(dòng)增加毕箍。
因?yàn)槲疫@里基本不會(huì)出現(xiàn)內(nèi)容長(zhǎng)度需要換行的問(wèn)題，所以這樣寫(xiě)也沒(méi)什么問(wèn)題道盏。
但是你的內(nèi)容需要換行的話而柑，就需要做一些額外的處理的。你可以試一下荷逞。
.view-box {
display: inline-block;
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
margin: 10rpx 10rpx 10rpx 20rpx;
background-color: #f5f5f5;
border-radius: 30rpx;
}
.view-text {
display: inline;
margin: 0px 20rpx;
}
-
圖片或者view的居中設(shè)置
<view class="orderRight"><image src="../images/right.png" class="orderImage"></image></view>
如上：一般設(shè)置圖片都會(huì)給一個(gè)底層view來(lái)包裹住它媒咳，然后主要設(shè)置view的屬性，對(duì)圖片主要就設(shè)置個(gè)大小种远。
.orderRight{
width: 120rpx;
display: flex;
align-items: center;
justify-content: flex-end;
}
.orderImage{
width: 48rpx;
height: 48rpx;
}
設(shè)置view的屬性為 display: flex涩澡，然后 align-items 和 justify-content 都有三個(gè)位置屬性：flex-start | center | flex-end
分別為：左(上)對(duì)齊 | 居中 | 右(下)對(duì)齊
這個(gè)我基本都是用來(lái)設(shè)置圖片才用到的，當(dāng)然坠敷，設(shè)置view的話也可以妙同。
可以參考：小程序的居中布局，你可以這樣做
-
布局時(shí)處處用到的flex屬性
display: flex; 這個(gè)基本是小程序中最常見(jiàn)的一行布局代碼了常拓。
設(shè)置父控件之后渐溶，子控件就 flex:1, flex: 2 自己慢慢分配。
具體的講解還是直接給個(gè)傳送門(mén)吧 —> 新手布局福音弄抬！微信小程序使用flex的一些基礎(chǔ)樣式屬性
-
文本溢出茎辐，單行省略
有時(shí)候我們需要一行顯示，最后顯示不完的顯示省略號(hào)
.oneLine {
overflow: hidden; /* 超出一行文字自動(dòng)隱藏*/
text-overflow: ellipsis; /* 文字隱藏后添加省略號(hào)*/
white-space: nowrap; /* 強(qiáng)制不換行*/
}
注意：?jiǎn)涡酗@示需要設(shè)置寬度掂恕！單行顯示需要設(shè)置寬度拖陆！單行顯示需要設(shè)置寬度！
-
文本溢出懊亡，多行省略
.view-multi-row {
/* 多行顯示依啰、并加省略號(hào) */
display: -webkit-box;
line-height: 33rpx;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
其中：line-height 設(shè)置每一行的行高，-webkit-line-clamp設(shè)置有多少行
如果你不限制它有多少行店枣，那就不需要多行省略速警，直接讓它自動(dòng)增高就行了叹誉。
設(shè)置需要多行省略的話，你需要注意總體的高度問(wèn)題闷旧。根據(jù)你的行高和行數(shù)自己計(jì)算一下３せ怼！忙灼！
