如果不更改寬度而更改內容時如何防止按鈕縮小？

Question

我有幾個使用display: flex放置在div中的表單按鈕display: flex 。

單擊“保存”按鈕后，我想隱藏保存按鈕的原始內容並顯示居中的旋轉圖標。 但是，我不希望按鈕的寬度發生變化，因為這會使頁面周圍的其他元素（按鈕）移動。 這就是我現在所發生的事情：

如何確保按鈕保持其原始寬度且不會收縮？ 我知道我可以在按鈕上設置一個min-width ，但這將要求我為此行為所針對的每個按鈕指定不同的寬度，因為每次文本可能會變短或變長。 我還嘗試過將flex-shrink: 0樣式的各種組合添加到按鈕上，但這似乎也不起作用。

代碼筆示例

https://codepen.io/kspearrin/pen/eVNeMX

HTML

<div class="wrapper">
  <button type="button" id="save">
    <span id="savetext"><i class="fa fa-save"></i> Save</span>
    <i class="fa fa-spinner fa-spin hide" id="spinner"></i>
  </button>
  <button type="button" id="cancel">Cancel</button>
  <div class="right">
    <button type="button"><i class="fa fa-star"></i></button>
    <button type="button"><i class="fa fa-trash"></i></button>
  </div>
</div>

CSS

.wrapper {
  display: flex;
  width: 400px;
  align-items: center;
  background-color: lightblue;
  padding: 10px;
}

button {
  margin-right: 10px;
  text-align: center;
  padding: 5px 10px;
}

button:last-child {
  margin-right: 0;
}

.right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.hide {
  display: none;
}

JS

document.getElementById("save").onclick = () => {
  document.getElementById("savetext").classList.add("hide");
  document.getElementById("spinner").classList.remove("hide");
};

document.getElementById("cancel").onclick = () => {
  document.getElementById("savetext").classList.remove("hide");
  document.getElementById("spinner").classList.add("hide");
};

Answer 1

如評論中所述，它與flexbox無關：行為正常。 未display框將適合其內容寬度。

您可以使用visibility和flexbox設置微調器的布局。 在這里，我只是將上層div設置為position:relative ，除了它成為absolute #spinner的引用之外，它什么都不做。 我將其拉伸到最大程度，並使用flexbox將其內容居中:)

 document.getElementById("save").onclick = () => { document.getElementById("savetext").classList.add("hide"); document.getElementById("spinner").classList.remove("hide"); }; document.getElementById("cancel").onclick = () => { document.getElementById("savetext").classList.remove("hide"); document.getElementById("spinner").classList.add("hide"); }; 

 .wrapper { display: flex; width: 400px; align-items: center; background-color: lightblue; padding: 10px; } button { margin-right: 10px; text-align: center; padding: 5px 10px; } button:last-child { margin-right: 0; } .right { margin-left: auto; display: flex; align-items: center; } .hide { visibility: hidden; } #save { position: relative; } #spinner { position: absolute; display: flex; align-items: center; justify-content: center; bottom: 0; top: 0; left: 0; right: 0; } 

 <div class="wrapper"> <button type="button" id="save"> <span id="savetext"><i class="fa fa-save"></i> Save</span> <i class="fa fa-spinner fa-spin hide" id="spinner"></i> </button> <button type="button" id="cancel">Cancel</button> <div class="right"> <button type="button"><i class="fa fa-star"></i></button> <button type="button"><i class="fa fa-trash"></i></button> </div> </div> 

更新的Codepen（font-awesome在這里不起作用）： https ://codepen.io/anon/pen/vdOpJd

Answer 2

您可以在此處為圖標使用position:absolute ，這樣它們就不會在按鈕流中交互，然后設置opacity:0並在單擊事件時設置opacity:1並隱藏text 。

_{記住設置position:relative對於父項}

而且我還建議您不要將類添加到父級中，而不要將其添加到每個內部元素中，以減少代碼。

堆棧片段

 document.getElementById("save").addEventListener("click", function() { this.classList.add("hide"); }); document.getElementById("cancel").addEventListener("click", function() { this.classList.add("hide"); }); 

 .wrapper { display: flex; width: 400px; align-items: center; background-color: lightblue; padding: 10px; } button { margin-right: 10px; text-align: center; padding: 5px 10px; position: relative; } button:last-child { margin-right: 0; } .right { margin-left: auto; display: flex; align-items: center; } button .fa-spinner { position: absolute; top: 6px; left: 10px; opacity: 0; } button.hide .fa-spinner { opacity: 1; } button.hide #savetext { visibility: hidden; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="wrapper"> <button type="button" id="save"> <span id="savetext"><i class="fa fa-save"></i> Save</span> <i class="fa fa-spinner fa-spin hide" id="spinner"></i> </button> <button type="button" id="cancel"> <span id="savetext"><i class="fa fa-times"></i> Cancel</span> <i class="fa fa-spinner fa-spin hide" id="spinner"></i> </button> <div class="right"> <button type="button"><i class="fa fa-star"></i></button> <button type="button"><i class="fa fa-trash"></i></button> </div> </div>