当我在 Chrome 上增加窗口大小时，弹性项目的大小发生了变化答案

【问题标题】：Size of flex item is changed when I increase window's size on Chrome当我在 Chrome 上增加窗口大小时，弹性项目的大小发生了变化
【发布时间】：2019-04-23 20:00:45
【问题描述】：

我在使用 flex box CSS 时遇到了麻烦，希望大家帮助我。 Flex 项目在响应时使文本下降。 enter image description here

窗口变小没关系，只有 Chrome 会遇到这个问题。

.career-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.career-nav a {
    position: relative;
    display: inline-block;
    font-size: 1.428em;
    line-height: 1;
    color: #000;
    padding: 13px 0;
    text-decoration: none;
    transition: background .2s ease;
}

<ul class="career-nav">
  <li><a href="#Citya" title="A City">City A</a></li>
  <li><a href="#Cityb" title="Hanoi">City B</a></li>
  <li><a href="#Cityc" title="Danang">City C</a></li>
</ul>

【问题讨论】：

flex-wrap: wrap; 如有必要，将灵活的物品包装起来。 developer.mozilla.org/docs/Web/CSS/flex-wrap
@Smollet777 谢谢你，但它仍然下降，文本“A 市”下降，只是窗口大小发生了变化，我做了一些效果很好的事情（例如：删除任何代码行）

标签： html css flexbox responsive

【解决方案1】：

问题是您将导航链接保留为默认的 flex 行为。

我会尝试为链接添加“flex”属性，同时为容器设置“nowrap”行为会很有用

 .career-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: nowrap;
  }
 .career-nav a {
    position: relative;
    display: inline-block;
    font-size: 1.428em;
    line-height: 1;
    color: #000;
    padding: 13px 0;
    text-decoration: none;
    transition: background .2s ease;
    flex: 0 0 auto;
 }

小提琴：http://jsfiddle.net/fbxq74rw/

在 Chrome、Firefox 和 Safari 上测试

【讨论】：

谢谢，我试过了，还是不行，原来的项目大小是52像素，我改变窗口大小后，它变小了。在firefox上就可以了
已解决，试试小提琴。您必须更具体地了解链接的 flex 设置。对于flex: 0 0 auto，您基本上是在说它们不会缩小或增长，可用空间将仅由justify-content: space-around;共享。
我想知道为什么我的答案被否决以及来自谁......只是为了了解他作为替代方案的建议......
对此我很抱歉，我不知道是谁干的。很高兴得到您的帮助，我认为新的 chrome 更新对代码有一些问题，因为我以前做过，没有类似的
你有没有试过我上次的更新，我在 Chrome、Firefox 和 Safari 上测试了小提琴