uni-app 更新新版之后无法垂直置顶排列了，一直居中
uni-app 更新新版之后无法垂直置顶排列了，一直居中
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 10.15.3 | HBuilderX |
### 操作步骤：
```css
.alignTop{
align-items: flex-start;
}
预期结果：
垂直置顶排列
实际结果：
垂直居中
bug描述：
更新新版本之后align-items: flex-start;失效了 排版永远都是垂直居中的，之前一直没问题
更多关于uni-app 更新新版之后无法垂直置顶排列了，一直居中的实战教程也可以访问 https://www.itying.com/category-93-b0.html
19 回复
还有个问题 更新这个3.1.0之后，动态绑定 class不管用了，:class=“current===index?‘dotCurr’:‘dot’”
更多关于uni-app 更新新版之后无法垂直置顶排列了，一直居中的实战教程也可以访问 https://www.itying.com/category-93-b0.html
<template>
<view class="content">
<view style="align-items: flex-start;"><image class="logo" src="/static/logo.png"></image></view>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
根据您的描述，这是一个在uni-app新版本中出现的flex布局问题。以下是可能的原因和解决方案：
-
检查父容器样式： 确保父容器设置了
display: flex和flex-direction: column，因为align-items在flex布局中需要这些属性才能正常工作。 -
尝试使用更明确的样式：
.alignTop {
display: flex;
flex-direction: column;
align-items: flex-start !important;
}
-
检查层级关系： 可能是其他样式覆盖了您的设置，建议在调试工具中检查最终应用的样式。
-
平台差异： uni-app在不同平台上的flex布局实现可能有差异，可以尝试添加平台特定样式：
/* #ifdef APP-NVUE */
.alignTop {
align-items: flex-start;
}
/* #endif */