运用flex布局时遇到的问题

问题描述

有一个显式声明高度的元素,运用flex布局且设置flex-wrap:wrap;。此时如果显式声明子元素的高度,如果子元素的高度和小于父元素声明的高度,那么会导致子元素在垂直方向上位置的预期产生偏差,子元素会以相等间隔均分剩余高度,看起来像是设置了margin值。问题如图

微信图片_20220112001433.png

解决方案

关键在于align-content属性,关于该属性的解释align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。我的理解是该属性控制了弹性布局容器内剩余空间的分配方式(这玩意还能分配属实是没想到的),如果想拥有和display:block;属性的元素的一个贴一个换行方式,可以用align-content:flex-start;或者align-content:flex-end;这取决你想怎么贴,其他剩余空间的分配方式可以自行百度,不一一细说了。

类似的问题

通过熟练的面向百度编程后,不光找到了上述问题的解决方式,而且还看到了一个类似的问题,以前隐约感觉遇到过,也是当时摸不着头脑,也是通过变通的方式解决了,并没有实际解决问题。这次让我逮到了,必须通过彦宏哥拿下。

问题描述

当父元素运用flex局部且flex-wrap:wrap;,并且显式设置了高度,如果子元素没有显示声明高度,那么子元素会自定撑满父元素。上一个问题是:奇了怪了,我的元素怎么不在应该的位置上。这个问题便是:齐了怪了,我就写了一行,这元素咋变得这么大。一番检查后,突然灵光一现,是不是设置了元素flex-grow:1;了,我直接设置flex-grow:0;我不让你放大,那么恭喜你,没啥用。

解决方案

1.要么父元素不设置高度

2.要么子元素设置高度

就是这么无情,看着办吧

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容