Flexbox 和绝对定位在 Chrome 和 Safari 中不起作用

Question

我有一个具有以下样式的按钮类：

.button {
  align-items: center;
  background-color: #fff;
  border: 2px solid;
  border-color: #f48120;
  color: #f48120;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 5px;
  padding: 3px 10px;
  position: relative;
  text-transform: lowercase;
}

.button::after {
  background-color: #fff;
  bottom: -4px;
  content: '\f111';
  display: flex;
  font-family: 'FontAwesome';
  font-size: 5px;
  justify-content: center;
  position: absolute;
  width: 25%;
}

<button class="button">Enviar</button>

如果我取消选中然后再次检查检查器中的“位置：绝对”属性，则圆圈将在中心对齐。这是 Blink/Webkit 错误吗？

Answer 1

需要考虑的四件事：

1. Flex items that are absolutely-positioned do not accept flex properties from the parent。因为它们是外流的，所以 flex 容器的绝对定位子元素会从 flex formatting context 中移除并返回到 block formatting context（或其他盒子模型）。

2. HTML <button> elements cannot be flex containers.

3. Absolutely-positioned flex items may not be removed from the normal flow in some browsers.

4. Center text over an image in flexbox

Answer 2

绝对元素不会被父对齐定位。只需将其放在左侧并将其转换为居中即可。

只是一个旁注，没有必要在绝对元素上使用display: flex;。

.button {
  align-items: center;
  background-color: deeppink;
  border: 2px solid;
  border-color: aqua;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 5px;
  padding: 3px 10px;
  position: relative;
  text-transform: lowercase;
}

.button:after {
  content: '';
  background-color: deepskyblue;
  bottom: -4px;
  font-size: 5px;
  position: absolute;
  width: 25%;
  height: 10px;
  left: 50%;
  transform: translateX(-50%);
}

<button type="button" class="button">Submit</button>