• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [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布局看上去有问题。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序隐藏scroll-view的滚动条发布时间:2022-07-18
下一篇:
uni-app学习-第一次运行微信小程序报错发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap