要素の塗りつぶしスペースを作る

Question

私は入力要素とそれの隣にボタン要素を持っています。
ボタンを固定サイズ（デフォルトサイズ）にし、残りの幅を入力するようにします。

どうすればよいですか？

これは私のコードです：あなたは、単にこのようにフレックスに使用することはできません

 <div style="position: fixed; 
     bottom: 0px; 
     left: 0px; 
     right: 0px; 
     background-color:white; 
     max-width:500px;"> 
     <input type="text" #message style="height: 50px; float:right;" /> 
     <button mat-fab (click)="newMessage()" color="primary"> 
      <mat-icon>send</mat-icon> 
     </button> 
     </div> 
    </div> 

Answer 1

：また

div { 
 
    display: flex; 
 
} 
 

 
input { 
 
    flex: 1; /* this will make the input to take the remaining space*/ 
 
}

<div style="position: fixed; 
 
     bottom: 0px; 
 
     left: 0px; 
 
     right: 0px; 
 
     background-color:white; 
 
     max-width:500px;"> 
 
    <input type="text" style="height: 50px;" > 
 
    <button mat-fab (click)="newMessage()" color="primary"> 
 
      <mat-icon>send</mat-icon> 
 
     </button> 
 
</div>

フロートプロパティを使用する必要が、あなたは位置を制御することができますorderプロパティを使用します。

上記のコードは右に、ボタンが左にある下のボタンを示しています。あなたは無効なHTMLタグを使用している

div { 
 
    display: flex; 
 
} 
 

 
input { 
 
    flex: 1; /* this will make the input to take the remaining space*/ 
 
    order:1; 
 
}

<div style="position: fixed; 
 
     bottom: 0px; 
 
     left: 0px; 
 
     right: 0px; 
 
     background-color:white; 
 
     max-width:500px;"> 
 
    <input type="text" style="height: 50px;" > 
 
    <button mat-fab (click)="newMessage()" color="primary"> 
 
      <mat-icon>send</mat-icon> 
 
     </button> 
 
</div>