错误场景

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

如图

html的结构如下

    
  
     
    手机号      
  
     
    验证码        获取验证码  
    
复制代码

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的区别和联系，可以参考

或者翻译版

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