flex这些问题应该被理解

  • flex这些问题应该被理解已关闭评论
  • 22 次浏览
  • A+
所属分类:Web前端
摘要

flex的值 auto, none, 0, 1, initial分别是什么?flex: auto 为 1 1 autoflex: none为 0 0 autoflex: 0为 0 1 0


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 === maxcontentflex-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