flex-basis 与 width 的区别

概念

• flex-basis

  指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。

• width

  指定了元素内容区的宽度. 内容区在元素padding，border和margin里面

区别

• 只有在容器为 display: flex 时，flex-basis 才起作用

• flex-direction 决定了 flex-basis，只指主轴方向

  • flex-direction: row 时，flex-basis 指的是项目的 width
  • flex-direction: column 时，flex-basis 指的是项目的 height

• 当在 flex 容器，主轴方向默认时，项目同时拥有 width 和 flex-basis ，项目的宽度取决于 flex-basis，主轴方向 column 时，同样是 flex-basis 决定高度

• 当项目 position: absolute 时，flex-basis 不在起作用 Absolutely-positioned flex items do not participate in flex layout. 宽度高度只和 width height 有关

  

  .container {
      position: relative;
      width: 400px;
      height: 200px;
      border: 1px solid orange;
      background: rebeccapurple;
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-end;
      text-align: center;
  }
  .item {
      flex-basis: 50px;
      background: lightskyblue;
      border: 1px solid red;
      flex-grow: 1;
      text-align: center;
  }
  .item1 {
      position: absolute;
      background: plum;
      width: 100px;
      height: 100px;
  }
  

  可以看到 item1 已经脱离文档流覆盖在了 item2 的上面，flex-basis: 50px 已无作用，取而代之的是 width: 100px; height: 100px;

总结

flex-basis 这个属性，前提是在 display: flex 的容器当中，主要起到的作用就是对项目的初始化大小进行 flex式 的定义，通过 flex-grow flex-shrink 进行放大缩小的弹性表现.

建议优先使用 flex 属性，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。