css中创建主轴方向,小程序 CSS flex 纵向布局，主轴属性不起作用？

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

justify-content:flex-start/flex-end/space-around; 都没有用，是不是哪里搞错了？ 求教大家

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

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

xml文件内容如下：

today

{{item.id}}

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;

}