小程序viewflex布局的對齊不對的問題

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布局看上去有問題。