小程序 CSS flex 纵向布局，主轴属性不起作用？

Question

小程序flex纵向布局，主轴属性不起作用，
justify-content:flex-start/flex-end/space-around; 都没有用，是不是哪里搞错了？ 求教大家

主轴为纵轴，justify-content:flex-start，按理说 子元素应该是从 主轴开始位置 垂直方向从上到下排列的，预期的结果应该是title元素 紧挨着顶部导航栏的

如下图，视图元素总是无法从顶开始排列，总留下大片空白居中排列

xml文件内容如下：

<view class="container" style="">

  <view class="title" style="background: pink;">today</view>

  <view class="view-list" style="background: red;" wx:for="{{list}}" wx:key="*this">

    <view id="{{index}}" class="item" bindtap="tapTitle">

    <text style="">{{item.id}}</text>

    </view>

  </view>

</view>

css内容如下：

.container{

  background: yellow;

  display: flex;

  flex-direction: column;

  justify-content:flex-start;

}

.item{

  padding: 5px;

  margin: 5px 20px;

  background: #f8f8f8;

  border: 1px solid #ccc;

  border-radius: 10px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

Answer 1

将外层view的class="container" 换了个名字之后 问题解决，应该是受到默认的container的css干扰了，不过理论上来讲，应该以当前页面的设定的css为主的，不知为何会干扰。