布局基礎(chǔ)
默認(rèn)每個View進行垂直布局。每個view占據(jù)一行。 flex布局(設(shè)置display=flex)
平面布局有一個主軸和交叉軸(類似于平面坐標(biāo)中的X軸和 Y軸) 默認(rèn)X軸為主軸 Y軸為交叉軸
flex容器屬性:針對于容器內(nèi)的容器 flex-direction排列方向 row(默認(rèn)) column
flex-wrap元素?fù)Q行問題 nowrap(不換行) wrap(換行) wrap-reverse換行反轉(zhuǎn)(多的一行在上面) flex-flow上面兩個的簡寫 先定義方向 再定義換行
justify-content主軸的對齊元素 center(沿主軸居中對齊) flex-start(主軸左邊、默認(rèn)方式) flex-end(主軸右邊) space-around(各個元素平分主軸空間) space-between元素兩端對齊 中間間隔相同
align-items交叉軸的對齊方式 flex-start flex-end center stretch(在元素沒有設(shè)置高度時,占滿整個容器的高度) baseline以元素中的文字的底線進行對齊
flex元素屬性 針對于容器內(nèi)的元素 flex-grow有多余空間時,元素的放大比例 設(shè)置多個元素之間的比例,按照比例瓜分剩余空間
flex-shrink空間不足時,元素的縮小比例 默認(rèn)為1,表示空間不足時,所有元素等比縮小 某元素設(shè)置為0時,表示不縮小 值越大,縮小比例越大。
flex-basis元素在主軸上占據(jù)的空間 rpx可能會不生效
flex是上面三者的簡稱 放大 縮小 空間 order元素排列順序 根據(jù)元素個數(shù),數(shù)越小越靠前
align-self元素自身的定義方式 利于定義某些特殊元素的布局
相對定位 相對于自身進行定位,參照物是自己 絕對定位 是相對于離它最近的已經(jīng)定位的父級元素進行定位的。 如果所有父級都沒有定位,則相對于整個窗口定位。 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)