flex-basisとwidthのレイアウトにおける役割

エラーシーン
今日図面を切る时、自分のボタンがどうしても右侧に揃わないことに気づきました.

<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のサイズはプロジェクトコンテンツのサイズです.
現在、私たちのinputは明確な幅を定義していません.したがって、参照はデフォルトの幅です.
次に、inputに具体的な幅を定義すると、次のように解決できます.width: 100px;
flex-basisとwidthの違いと連絡についてはgeddを参照してください.ski/post/the-di...または翻訳版www.jianshu.com/p/17b1b445e…
さあ、今日はこれだけで、退勤がキラキラします.ここで皆さんの新春の佳節を祈って、何事も順調です^^;