flex布局一种常用的布局方式;记住四个样式即可:
display:flex;
flex-direction: column;
justify-content:space-around
align-items:flex-end
外层容器元素:.menu
子元素: .item(包含一个div和span)
html:
<view class="menu2"> <view class="item"> <image src="/static/image/Ah玥玥.jpg"></image> <text>玥玥</text> </view> <view class="item"> <image src="/static/image/Ah玥玥.jpg"></image> <text>玥玥</text> </view> <view class="item"> <image src="/static/image/Ah玥玥.jpg"></image> <text>玥玥</text> </view> <view class="item"> <image src="/static/image/Ah玥玥.jpg"></image> <text>玥玥</text> </view> </view>
CSS:
.menu{ // width: 750rpx; // height:1000px; display:flex; /*在水平或垂直方向排列*/ /* row:主轴为水平,column:主轴为垂直方向 */ flex-direction: column; /*排列方式:space-around 平均居中布局;center 整体居中布局;space-between 左右靠边,平均布局;flex-start 从左边开始布局*/ justify-content:space-around /*在副轴方向如何展示:space/center/space-between/flex-start/flex-end */ align-items:flex-end /*flex-end:垂直排列情况下,水平靠右展示*/ } ? .menu .item{ display:flex; flex-direction:column; /*子元素内部标签垂直排列*/ align-items:center /*在主轴垂直排列下,副轴水平方向居中*/ }