微信小程式樣式Flex Box精通課程-Flex專案的屬性-margin(對齊和居中)
阿新 • • 發佈:2019-01-13
margin(對齊和居中)
預設樣式和程式碼
效果如圖
Wxml程式碼
<view class='zong'> <view class='fangxing1'> <text>01</text> </view> <view class='fangxing2'> <text>02</text> </view> <view class='fangxing3'> <text>03</text> </view> </view>
Wxss程式碼
.zong{ display: flex; flex-direction: row ; padding: 5px;/*內邊距*/ } .fangxing1{ width: 60px; height: 60px; background-color: #f5f5dc; margin: 5px;/*每個方框的外邊距*/ } .fangxing2{ width: 60px; height: 60px; background-color: #f5f5dc; margin: 5px;/*每個方框的外邊距*/ } .fangxing3{ width: 60px; height: 60px; background-color: #f5f5dc; margin: 5px;/*每個方框的外邊距*/ }
對齊
設定"margin"值為"auto"值,自動獲取彈性容器中剩餘的空間。所以設定垂直方向margin值為"auto",可以使彈性子元素在彈性容器的兩上軸方向都完全集中。 以下例項在第一個彈性子元素上設定了 margin-right: auto; 。 它將剩餘的空間放置在元素的右側性:
下面我們設定01區塊的margin-righ的值為auto,其他區塊不變;我們只需要改造01區塊對應的樣式(樣式類名fangxing1)程式碼即可。
效果如圖
Wxss程式碼
.fangxing1{ width: 60px; height: 60px; background-color: #f5f5dc; margin-right: auto; }
居中
完美的居中 以下例項將完美解決我們平時碰到的居中問題。 使用彈性盒子,居中變的很簡單,只想要設定 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中性:
效果如圖
Wxml程式碼
<view class='zong2'>
<view class='fangxing4'>
<text>04</text>
</view>
</view>
Wxss程式碼
.zong2{
display: flex;
padding: 5px;/*內邊距*/
height: 200px;
background-color: gainsboro;
}
.fangxing4{
width: 60px; height: 60px;
background-color: #f5f5dc;
margin: auto;
}
如何讓區塊中的文字居中
我們需要設定左右居中和上下居中,我們改造04區塊的樣式程式碼。
效果如圖
Wxss程式碼
.fangxing4{
width: 60px; height: 60px;
background-color: #f5f5dc;
margin: auto;
text-align: center;/*所有居中*/
line-height: 60px;/*上下居中*/
}
微信小程式樣式Flex Box精通課程 https://edu.csdn.net/course/detail/10624