H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【图文】如何理解flex-shrink和flex-grow?

flex-grow

  • 剩余空间,按照比例添加给各个item
  • 剩余空间:flex容器大小 – 所有flex项目大小
  • 所有项目都有相同系数,获得相同的剩余空间
  • 否则根据flex-grow决定的比例分配剩余空间
    flex-grow

    image.png
    image.png

flex-shrink

  • 超出空间 = 各个item的宽度之和 – 父容器的宽度
  • 超出空间,让各个item按照shrink比例减去相应的部分
  • 所以item的默认宽度相加时,大于容器时收缩
  • 收缩比例是根据flex-shrink的值,初始值为1
  • 参数为0时,表示未压缩
    shrink为0
  • 参数不可为负
    flex-shrink.jpg
    shrink例子.png

本文地址:H5W3 » 【图文】如何理解flex-shrink和flex-grow?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址