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

问题描述

问 题

小程序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;
}

解决方案

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

这篇关于javascript - 小程序 CSS flex 纵向布局，主轴属性不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！