宜宾网站建设公司

flex这些问题应该被理解

flex三连问，帮助我们更好的理解布局利器

问题：

  1. flex的值 auto, none, 0, 1, initial分别是什么？有什么作用？有什么表现？
  2. flex-basis和width的区别？单值flex-basis：0与auto的区别？flex-basis：100px与width：100px一样吗？
  3. 怎样理解剩余空间？

解决：

问题一：

flex的值 auto, none, 0, 1, initial分别是什么？

成都创新互联服务项目包括泸州网站建设、泸州网站制作、泸州网页制作以及泸州网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，泸州网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到泸州省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

  • flex: auto 为 1 1 auto

  • flex: none为 0 0 auto

  • flex: 0为 0 1 0

  • flex: 1为 1 1 0

  • flex: initial为 0 1 auto

提一嘴，我认为重要的是这个flex的默认值，也就是initial。因为多数情况，我们都是在默认值上修改，其他再不容易记的东西，也会有了参照而变得游刃有余。

上述五种情况的作用及表现什么？

  1. flex：initial（默认值）

  • 父盒子设置为弹性盒，子元素默认就为initial，一般用于还原默认值

  • 表现为不会随之增大，会随之减小，宽度参照自身

  1. flex：1

  • 一般用于等分（分配剩余空间后，表现为等分）

  • 表现为会随之增大，会随之减小，宽度内容区最小宽度（分配剩余空间前）

  1. flex：0

  • 不常用

  • 表现为不会随之增大，会随之减小，宽度内容区最小宽度（分配剩余空间后）

  1. flex：auto

  • 一般用于文字越长，元素越宽的场景

  • 表现为会随之增大，会随之减小，宽度参照自身

  1. flex：none

  • 一般用于保持元素自身宽度，且文字不换行

  • 表现为不会随之增大，不会随之减小，宽度参照自身

问题二：

flex-basis和width的区别？单值flex-basis：0与auto的区别？

  • 两者都是用于改变弹性盒元素的宽度

  • flex-basis比width优先级更高；

    • 如果flex-basis为auto，那么元素就会参照width

    • 如果flex-basis不为auto（如：0，200px等），那么元素就会忽略width（即使你设置了width），采用flex-basis的值

flex-basis：100px与width：100px（弹性盒可缩减为前提条件）一样吗？

  • 首先说结论，不一样！！！

    • width：100px + flex-basis：auto === 元素100px
    • content + flex-basis：100px === max（content， flex-basis：100px） >= 元素100px

  • 剖析一下，有以下两种情况：

    1. 元素flex-basis为auto时，width设为100px，那么当缩小弹性盒时，元素始终为100px，不会变化。那么如果该元素内容区宽度超过100px（比如内嵌的图片，font-size大小等），那么也不会撑大该元素，它就是个定值100px

    2. 元素flex-basis不为auto时，width设为多少都没用，优先取flex-basis的值。若flex-basis为100px，那么如果该元素内容区宽度超过100px（比如内嵌的图片，font-size大小等），那么与设置width结果相反，会撑大该元素，最后计算的宽度会大于100px。

  • width就是写死，无论怎么变，该元素就是这么宽；flex-basis意思是，元素大概是这么宽，如果有意外情况，那么我还会改变。

    • 举个小栗子帮助理解下：你晚上在加班，女朋友要让你陪她一个小时，但是女人的嘴，骗人的鬼，指不定耽误多长时间呢。然后。。。

      • width的理解：我是个负责任的男人，一个小时一分不多一分不少，不会因为任何说法改变这一个小时。

      • flex-basis的理解：女朋友比任何事都重要，如果她不闹腾，那么一个小时就准时结束，否则，我只能由着她的性子来了。唉，折腾到明早也有可能，没办法，谁让她最重要呢？

问题三：

怎样理解剩余空间？

  1. 开启弹性盒的元素的宽度为总空间

  2. 去掉所有子元素的固定宽度后，剩余的空间就叫做剩余空间

  • 子元素有width属性，那么去掉width就是剩余空间

  • 子元素有flex-basis：100px

    • 如果100px小于总宽度，那么去掉flex-basis就是剩余空间

    • 如果100px大于总宽度，那么没有剩余空间

      • 如果缩减系数flex-shrink为0，那么元素就是100px，表现为超出父盒子

      • 如果缩减系数flex-shrink不为0，元素的最终宽度也要少于100px


网站名称：flex这些问题应该被理解
分享路径：http://ybzwz.com/article/dsojeid.html

其他资讯