仅水平收缩 flexbox

Question

我一直在尝试制作一个自定义共享按钮（用于谷歌课堂），似乎弹性框是使文本居中的最佳方式。我正在制作一个分享按钮，所以我有一个图像和文字。这是我当前的代码：

a {
  border-color: green;
  border-style: solid;
  color: white;
  border-radius: 3px;
  text-decoration: none;
  background-color: green;
  font-family: calibri;
  display: flex-shrink;
  justify-content: center;
  align-items: center;
}

img {
  padding: 5px;
  height: 32px;
}

span {
padding: 5px;
}

<a href="https://classroom.google.com/share?url=http://example.com">
  <img src="https://ktibow.github.io/classroom-logo.png"\>
  <span>Share to Classroom</span>
</a>

它应该是一个漂亮的圆形按钮，左侧是 Google Classroom 徽标，右侧是文本。但是，按钮的背景会缩小到图像之外。

我试过在没有 flex-shrink 的情况下使用它。然后它会填满整个页面，这不是共享按钮通常的样子，即使它确实覆盖了图像的背景。我也尝试过设置跨度的高度和字体大小。高度没有任何作用，如果我做字体大小，那么它就会被切断。我在图片上也试过flex-shrink: 0。有人知道怎么解决吗？

Answer 1

新设计

我的工作是给a标签display: inline-block

并将img 移动到position: absolute

我觉得现在好多了

a {
  text-decoration: none;
  display: inline-block;
  margin: 10px 5px 10px 24px;
  position: relative;
}

img {
  position: absolute;
  border-radius: 50%;
  height: 38px;
  top: -10px;
  left: -18px;

}

span {
  padding: 3px 5px 3px 24px;
  background-color: green;
  border-radius: 3px;
  color: white;
  font-family: calibri;
}

<a href="https://classroom.google.com/share?url=http://example.com">
    <img src="https://ktibow.github.io/classroom-logo.png"\>
    <span>Share to Classroom</span>
</a>

或者就像人们用display: inline-flex写的那样

a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin: 10px 5px 10px 24px;
  background-color: green;
  border-radius: 3px;
  padding: 5px;
}

img {
  height: 38px;
}

span {
  padding: 5px;
  color: white;
  font-family: calibri;
}

<a href="https://classroom.google.com/share?url=http://example.com">
    <img src="https://ktibow.github.io/classroom-logo.png"\>
    <span>Share to Classroom</span>
</a>

Answer 2

a {
  border-color: green;
  border-style: solid;
  color: white;
  border-radius: 15px;
  text-decoration: none;
  background-color: green;
  font-family: calibri;
  display: flex-shrink;
  justify-content: center align-items: center;
 position: absolute;
display: flex;
}

img {
  padding: 10px;
  height:  30px;

}

span {
 margin-top: 15px;
}

我不知道这是否是您想要实现的目标。 虽然不是最好的方法