当内容更改而不设置宽度时，如何防止按钮收缩？

Question

我有几个使用display: flex 定位在div 中的表单按钮。

点击“保存”按钮后，我想隐藏保存按钮的原始内容并显示一个居中的旋转图标。但是，我不希望按钮的宽度发生变化，因为这会导致页面周围的其他元素（按钮）发生变化。这是我现在的情况：

如何确保按钮保持原来的宽度并且不会缩小？我知道我可以在按钮上设置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

如cmets中所说，与flexbox无关：行为正常。不是display 的框将适合其内容宽度。

您可以使用visibility 和 flexbox 来设置微调器的布局。 在这里，我只是将上面的 div 设置为position:relative，除了它成为#spinner 的引用，即absolute 之外，它什么也不做。 我将它拉伸到最大，并用弹性框将其内容居中:)

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>