Question

我使用display: flex在div中放置了几个表单按钮。

点击＆＃34;保存＆＃34;按钮我想隐藏保存按钮的原始内容并显示居中的旋转图标。但是，我不希望按钮的宽度发生变化，因为这会导致页面周围的其他元素（按钮）移动。这就是我现在所发生的事情：

如何确保按钮保持原始宽度并且不缩小？我知道我可以在按钮上设置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，除了它成为#spinner absolute的引用外，它什么都不做。我将它拉伸到最大值并使用flexbox将其内容居中：）

＆＃13;

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");
};

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

您可以在此处使用position:absolute作为图标，以便他们不会在按钮流中界面，然后设置opacity:0并点击事件集opacity:1并隐藏text

_{请务必设置父级的position:relative}

我还建议你将类添加到父级而不是分别添加到每个内部元素中以减少代码。

Stack Snippet

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>

如果按钮内容在没有设置宽度的情况下更改，如何防止按钮缩小？

2 个答案: