请问justify-content失效是什么原因

Question

要把justify-content用在starContainer这个容器里。效果和代码如下.starContainer {   display: flex;   justify-content: flex-start; }红箭头的那一列就是starContainer作用的区域，明显不是justify-content: flex-start;一开始觉得可能是因为不是view组件，就给每一个组件包上view，不行。然后starContainer里加上flex-direction:row也没成功。虽然小程序代码使用的是flex布局，但是毕竟也属于css，所以想请问一下大神们，这是什么原因呢？？？小程序代码wxml<view class="container">     <view class="starContainer">       <view class="date">2017-11-4</view>       <image class="authorImage" src="/images/avatar/4.png" />       <view class="textAuthor">嘻嘻里嘻嘻里</view>     </view>     <text class="textWords">       “特朗普如此反复无常且不受任何核心承诺或理念的约束，以至于在外界看来，他相当不靠谱，”达莱克说，“这给美国传统的治国和外交方略蒙上了一层阴影，而且使外交官们在开展工作时多了很多困惑。”     </text>     <view class="dateDiscuss">       <view class="likeText">8星</view>       <image class="starImage" src="/images/icon/starB.jpg" />     </view>   </view>小程序wxss代码.container {   display: flex;   flex-direction: column;   margin-top: 20rpx;   margin-bottom: 40rpx;   margin-left: 0rpx;   background-color: #fff;   border-bottom: 1px solid #ededed;   border-top: 1px solid #ededed;   padding-bottom: 5px; } .likeText {   font-size: 30rpx;   margin-right: 30rpx; } .starContainer {   display: flex;   justify-content: flex-start; } .authorImage {   width: 32rpx;   height: 32rpx;   /* margin: 0rpx 10rpx 0rpx 30rpx; */ } .starImage {   width: 32rpx;   height: 32rpx; } .textAuthor {   font-size: 32rpx;   color: #68228b; } .textWords {   font-size: 32rpx;   color: #333;   margin-left: 10rpx;   margin-bottom: 15rpx; } .date {   font-size: 32rpx;   color: #68228b; } .dateDiscuss {   display: flex;   margin-left: 450rpx; }解决方法设置 width: 100%;就可以了。看的这个网址https://segmentfault.com/q/1010000006231565