如何讓三個元素填充一個div，其中center元素具有動態寬度？

Question

我試圖爲用戶設計一個接口來插入一個詞的前綴或後綴。理想情況下，單詞（隨機選擇）將顯示在包裝的中心，然後任一側的文本框將延伸到包裝的邊緣。這裏的設置：

<div class="wrapper"> 
    <div class="left">{{text input}}</div> 
    <div class="center">{{dynamic content}}</div> 
    <div class="right">{{text input}}</div> 
</div> 

這看起來像以下（其中下劃線的文本輸入字段，小寫是可能的輸入）：

|________CONDITION________| => |____pre_CONDITION________| or |________CONDITION_al_____| 
|__________ALLOW__________| => |______dis_ALLOW__________| or |__________ALLOW_ance_____| 
|___________RUN___________| => |______over_RUN___________| or |___________RUN_ner_______| 

我以前見過類似這樣的問題，但我一直沒能找到解決方案。中心格沒有靜態寬度，所以我不能determine the widths manually。我需要左側和右側div包含實際內容（不只是造型），所以我不能真的change the HTML。我正在尋找一個解決方案，允許中心div有任何寬度，並強制左右div填充剩餘的水平空間。

有沒有辦法用CSS做到這一點？非常感謝您的寶貴時間。

Answer 1

使用flex

.wrapper { 
 
    display: flex; 
 
} 
 
.left, .right { 
 
    flex: 1; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
} 
 
.center { 
 
    flex: 0; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
}

<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content</div> 
 
    <div class="right">text input</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content, longer</div> 
 
    <div class="right">text input</div> 
 
</div>

或者display: table

.wrapper { 
 
    display: table-row; 
 
} 
 
.left, .right { 
 
    display: table-cell; 
 
    width: 50%; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
} 
 
.center { 
 
    display: table-cell; 
 
    width: 1%; 
 
    white-space: nowrap; 
 
    border: 1px solid 
 
}

<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content</div> 
 
    <div class="right">text input</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="left">text input</div> 
 
    <div class="center">dynamic content, longer</div> 
 
    <div class="right">text input</div> 
 
</div>