栅格系统与flex布局冲突问题

栅格系统与flex布局冲突问题

http://img1.sycdn.imooc.com//climg/5fb6374c0967701614380476.jpg

#在栅格系统的基础上,设置flex布局,.row下的两个div都为flex项目,将第一个div里设置垂直居中,第二个就不受影响吗?


@media (min-width768px) {

    .slider-container .row {

        display: flex;

        align-items: center;

    }

}


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,在当前代码中float浮动和flex布局互不影响。因为flex布局默认会让子元素显示在一行,而浮动也是显示在一行的,所以效果上基本不变。而使用flex,只是让子元素在垂直方向上居中显示

http://img1.sycdn.imooc.com//climg/5fb64e610903d1b403290135.jpg

并没有添加其他flex布局的样式,所以对于float来说没有影响。

​祝学习愉快!

好帮手慕星星 2020-11-19 18:27:52

同学你好,这里是不冲突的。这里使用flex,主要是想调整子项在垂直方向上的位置,两个div都受影响。只不过其中一个看不到效果,因为在垂直方向上的高度和父盒子一致

http://img1.sycdn.imooc.com//climg/5fb6485c0966b34907530515.jpg

所以即使居中了也看不到效果。

祝学习愉快!

  • 提问者 沐寒528 #1
    如果说flex对两个项目都起了作用,是因为高度不够而没显示出来。。那在大屏下,手机图片为啥还保留在(栅格系统的float:left作用)的原位置而不受影响呢(不是他在垂直方向因为高不够看不到吗?),这两个作用互不影响和叠加吗?
    2020-11-19 18:45:17
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师