前言:
最近在寫小程序,很多樣式都是一個個百度下來的,總結一下
遇到的樣式問題
1.line-height 屬性
使用百分比設置行高:
image.png
基于當前字體尺寸的百分比行間距。
image.png
image.png
1.顏色進行漸變顯示
background:linear-gradient(to right,#070E26,#390067)
2.div高度固定 文字可以滑動加載
overFlow-y: scroll
3.有3個div 希望
A B
C
這樣展示
父組件
flex-wrap: wrap
wrap 規(guī)定靈活的項目在必要的時候拆行或拆列嘿般。
nowrap 默認值。規(guī)定靈活的項目不拆行或不拆列
子組件
.textCon > view {
width: 50%;
flex: 0 0 50%;
text-align: left;
padding: 8rpx 8rpx;
}
flex: 0 0 50%;
flex是flex-grow,flex-shrink,flex-basis3個屬性結合在一起的縮寫形式,后兩個屬性可選寫
flex-grow
表示當子元素的空間小于父元素的空間時,如何處理剩余空間,
默認值為0表示不占有剩余空間;
當子元素都設置為1時表示平均分配剩余空間;
當一個子元素為2其余子元素為1時為2的子元素占據的剩余空間比其他子元素多一倍;
當一個子元素為1其余子元素為0,為1的子元素占據全局剩余空間
felx-shrink
表示當子元素的空間大于父元素的空間時,如何縮小子元素,默認值為1當所有子元素都設置為1時所有子元素都會等比例縮小,當一個子元素為0其余子元素為1是表示為0的子元素不縮小,其余元素縮小
flex-basis
用于設置項目占據的主軸空間,設置為auto表示項目占據的主軸大小等于項目的實際內容大小,設置為固定值表示項目占據的主軸大小等于固定值
ps實驗證明 不加flex也是可以的
結尾
后面還會繼續(xù)補充的~~
