flex-direction不起作用时,记得给父元素添加display:flex
先贴代码和截图
css:
.footfixed {
display:block;
position:fixed;
bottom:0;
left:0;
background:#fff;
z-index:50;
width:100%;
font-size:28rpx;
line-height:100rpx;
color: snow
}
.foot-left{
display: flex;
width: 50%;
height: 100rpx;
}
.foot-right{
display: flex;
width: 50%;
height: 100rpx;
}
.foot-left-block{
display: flex;
width: 25%;
height: 100rpx;
border-right: 1px solid #eee;
}
.foot-icon{
width: 70rpx;
height: 70rpx;
display: inline-block;
}
wxml:
<!--底部-->
<view class="footfixed">
<view class="foot-left">
<view class="foot-left-block">
<image class="foot-icon" src="/images/cart.png"></image>
<view class="dbtext">购物车</view>
</view>
<view class="foot-left-block" bindtap="set_share" data-status="1">
<image class="foot-icon" src="/images/f.png"></image>
<view class="dbtext">分享</view>
</view>
</view>
<view class="foot-right">
<button type="default" data-type="addcart" data-status="1">加入购物车</button>
</view>
</view>
做出来的样子惨不忍睹:
问题1:购物车,分享,加入购物车按钮不在同一行
问题2:购物车,分享组件内应该上下布局,而不是左右
问题3:组件大小,颜色,渲染等太丑陋
接下来就来看看怎么拯救吧
问题2解决办法:在图片和文字的父元素里设置flex-direction:column 以及align-item:center就行了,前者是控制元素内列分布,后者是水平居中。(align-item和align-content的区别问题,不懂得看官可以自行搜索一下哈)
按照问题2的解决思路去解决问题1,在footfixed元素,即最高父元素里设置了flex-direction:row,但是并没有用,left和right两块仍旧是上下布局,而不在一行里,这里有个要注意得地方是display被设置成了block,改为flex即可解决
删去button里的type属性,增加一个class
最后奉上更改后的css:
.footfixed {
display:flex;
position:fixed;
flex-direction: row;
bottom:0;
left:0;
background:#fff;
z-index:50;
width:100%;
font-size:28rpx;
line-height:100rpx;
color: snow;
}
.foot-left{
display: flex;
width: 50%;
height: 100rpx;
}
.foot-right{
width: 50%;
height: 100rpx;
}
.foot-left-block{
display: flex;
flex-direction: column;
width: 25%;
height: 100rpx;
border-right: 1px solid #eee;
align-items: center;
}
.foot-icon{
width: 70rpx;
height: 70rpx;
}
.foot-text{
line-height: 30rpx;
color: #666;
font-size: 24rpx;
}
.foot-right-btn{
width: 50%;
height: 100rpx;
color: #fff;
background-color: #ec612a;
font-weight: normal;
line-height: 70rpx;
align-items: center;
}
button的圆角变成直角应该会更好看点吧。。。