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…

好了，今天就這麼多，下班閃人。在此祝你們新春佳節，事事順心 ^_^