小程序viewflex布局的对齐不对的问题

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

index.wxml:

<view class="container">
    <view class="nav-container">
        <view class="nav">
            <view class="logo">
                <image src="../../assets/images/logo.png" mode="widthFix"/>
            </view>
            <view class="name">
                <view>
                    <text>小小英语源自清华</text>
                </view>
                <view>    
                    <text>为中国幼童提供最合适的语言启蒙体系</text>
                </view>    
            </view>
            <view>

            </view>
        </view>
    </view>
</view>

index.wxss:

.container{
font-size:20rpx;

/*以下为项目生成时默认的，在app.wxss里面*/
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.nav-container{

}
.nav{
padding:0.16rpx 0.3rpx;
display: flex;
justify-content: flex-start;
width:100%;
}
.nav>view{
vertical-align: middle;
}
.logo{
width:58rpx;
height:58rpx;
}
.logo>img{
width:100%;
height:auto;
}
.name{
margin-left:10rpx;
border-left:2rpx solid #4A4A4A;
padding-left:10rpx;
}

效果：

导航栏居中了，这不是我们想要的。

我们在.nav这里多包含了一层view，虽然这层多余的，但是，我们的flex布局的属性 justify-content好像不起作用了，定位之后发现，nav-container和.nav宽度并不是100%；那也就是说，并不是flex布局justify-content不起作用的原因。而是view宽度的问题。解决方法：
1.给nav-container加宽度。

.nav-container{
width:100%;
}

2.去掉外层的.nav-container view
3.覆盖app.wxss里面的container

.container{
font-size:20rpx;

/*以下为项目生成时默认的，在app.wxss里面*/
height: 100%;
display: flex;
flex-direction: column;
align-items: felx-start;/*修改了这里*/
justify-content: space-between;
box-sizing: border-box;
}

归根结底，.align-items(定义项目在交叉轴上如何对齐)影响到了其子元素的初始对齐方式。导致孙子元素的flex布局看上去有问题。