flex-basis与width在布局中的作用

错误场景

今天在切图的时候，发现自己的按钮怎么都无法在右侧对齐
如图

html的结构如下

<ul>
  <li>
    <span>手机号</span>
    <input type="text" placeholder="请输入注册手机号">
  </li>
  <li>
    <span>验证码</span>
    <input type="text" placeholder="请输入验证码">
    <i class="check-code unable">获取验证码</i>
  </li>
</ul>
复制代码

css为flex布局，左侧文字flex-basis固定宽度，中间的input宽度auto自动grow；右侧验证码flex-basis固定宽度 在不加验证码的情况下，正常显示，加入验证码以后

li {  // 每行的样式
  display: flex;
  height: .52rem;
  margin-left: .16rem;
  padding-right: .16rem;
  font-size: 16px;
  justify-content: space-between;
  align-items: center;
  color: #333;
  border-bottom: solid 1px #eee;
  span {
    flex: 0 0 .9rem;
  }
  input {  // 输入框
    height: 100%;
    font-size: 16px;
    flex: 1 0 auto;
  }
  .check-code {  // 验证码
    border: solid 1px #E31335;
    flex: 0 0 .9rem;
    text-align: center;
    height: .24rem;
    line-height: .24rem;
    color: #E31335;
    font-size: 12px;
    border-radius: 3px;
    &.unable {
      color: #C1C2C2;
      border: solid 1px #C1C2C2;
    }
}
复制代码

解决思路

正常来说，验证码这块里是不会伸展的；而input有定义了flex: 1 0 auto;说明input会自动伸展占据当前盒子中剩余的空间。 但是现在不仅占据了盒子剩余的空间，甚至超出了剩余的空间；验证码被挤到了盒子外边。
所以我想到的是宽度这块出现了问题，在布局中，左边文字和右边的验证码宽度都是固定的，所以最后可能出现问题的是input的宽度；这里跟input宽度相关的便是flex-basis

flex-basis

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

如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小
如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小

而当前我们的input并没有定义明确的宽度；所以参照的是默认的宽度；

然后，我们给input定义一个具体的宽度，便可解决（值不可过大）如： width: 100px;

更多关于flex-basis和width的区别和联系，可以参考 gedd.ski/post/the-di…
或者翻译版
www.jianshu.com/p/17b1b445e…

好了，今天就这么多，下班闪人。在此祝大家新春佳节，事事顺心 ^_^