文盲老顾 2021-07-27 15:41 采纳率: 100%
浏览 295
已结题

flex布局下,max-width的 flex-basis 的问题

这两天在做页面调整,以前在未使用 flex 布局时,很多元素我给设置了 max-width,可以多浏览器兼容

在这次使用了flex布局后,部分元素设置了max-width,结果急速模式没有问题,兼容模式(ie)下,设置了max-width的元素跑掉了,只有当 flex-basis和max-width一致的时候才显示正常

这个是正常显示的样子


  <div style="display:flex;width:400px;padding:10px;border:1px solid #ccc;justify-content:space-between;">
    <div style="width:100px;padding:10px;border:1px solid #ccc;">左边</div>
    <div style="padding:10px;border:1px solid #ccc;">右边</div>
  </div>

这个就显示不正常了


        <div style="display:flex;width:400px;padding:10px;border:1px solid #ccc;justify-content:space-between;">
            <div style="width:100px;padding:10px;border:1px solid #ccc;">左边</div>
            <div style="padding:10px;border:1px solid #ccc;flex:1;max-width:50%;display:flex;">右边</div>
        </div>

而如果加上 flex-basis,则max-width失效了,他自动弹性到50%了,失去了max-width设置的意义,


        <div style="display:flex;width:400px;padding:10px;border:1px solid #ccc;justify-content:space-between;">
            <div style="width:100px;padding:10px;border:1px solid #ccc;">左边</div>
            <div style="padding:10px;border:1px solid #ccc;flex:1;max-width:50%;display:flex;flex-basis:50%;">右边</div>
        </div>

img

上边三个布局如图

我的问题是,如何在 flex 布局下,对 max-width 进行友好的支持,而不是直接使用 flex-basis 强制布局

即:设置了max-width的元素,在元素未占满max-width设置时,他不会放大到max-width的宽度

  • 写回答

1条回答 默认 最新

  • 文盲老顾 WEB应用领新星创作者 2021-07-27 15:47
    关注
    
            <div style="display:flex;width:400px;padding:10px;border:1px solid #ccc;justify-content:space-between;">
                <div style="width:350px;padding:10px;border:1px solid #ccc;">左边</div>
                <div style="padding:10px;border:1px solid #ccc;flex:1;max-width:50%;display:flex;flex-basis:50%;">右边</div>
            </div>
    

    补充一个,当左边宽度比较长,需要占用右边空间时,由于flex-basis的存在,他无法扩张了

    img

    
            <div style="display:flex;width:400px;padding:10px;border:1px solid #ccc;justify-content:space-between;">
                <div style="width:350px;padding:10px;border:1px solid #ccc;">左边</div>
                <div style="padding:10px;border:1px solid #ccc;flex:1;max-width:50%;display:flex;">右边</div>
            </div>
    

    左边元素空间占用较多,右边空间不够max-width时,应该收缩右边,和这个一样

    img

    评论

报告相同问题?

问题事件

  • 系统已结题 8月4日
  • 创建了问题 7月27日

悬赏问题

  • ¥50 深度学习运行代码直接中断
  • ¥15 关于#单片机#的问题,请各位专家解答!
  • ¥15 关于#单片机#的问题,请各位专家解答!
  • ¥20 需要完整的共散射点成像代码
  • ¥15 编写vba代码实现数据录入工作
  • ¥15 做过TCL海信电视小米电视相关影视会员软件私我
  • ¥15 Mapreduce是正常的,在运行其他jar包时并没有任何问题,只是在做LogCount.jar 时出的问题。如图所示
  • ¥15 ImportError: DLL load failed while importing _iterative: 找不到指定的模块。
  • ¥15 如何通过交互分析得出某高危患者对放疗获益更多
  • ¥15 相关性分析中,p<0.05, r=0.29,怎么评价相关性呢