微信小程序固定底部样式问题（flex-direction不起作用）

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的圆角变成直角应该会更好看点吧。。。