老师帮看一下这个问题

来源:5-2 项目作业

要每天学习的小蓝同学

2021-11-24 10:36:50

我最近就是布局用了绝对定位或者相对定位时候,用flex布局就会flex失效

我对一个a盒子相对外面盒子绝对定位或者相对定位,对a盒子里边的项目用flex布局。flex布局失效,这是为什么?

https://img.mukewang.com/climg/619da53209185ff806530224.jpg

相关代码:

.words-counts {
    position: absolute;
    bottom: .55rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .6rem;
    line-height: .85rem;
    color: #999999;
    padding-bottom: .55rem;
    border-bottom: 2px solid #DADADA;
}


写回答

1回答

好帮手慕然然

2021-11-24

同学你好,是因为在给父盒子设置了绝对定位或固定定位后(老师测试相对定位是没问题的),则该父盒子的宽度和高度就是由内容撑开的,即内容有多大父盒子就有多大,如图https://img.mukewang.com/climg/619db05609759b9610170584.jpg

此时,父盒子没有足够的空间,给其设置弹性布局内部的子元素也不会有效果,所以只需给父盒子设置一下宽度和高度,弹性布局就会有效果了,如图

https://img.mukewang.com/climg/619db1a509447d4a10840381.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程