Question

我尝试使用图标创建静态宽度导航栏。当用户将鼠标悬停在图标上时，它将展开以显示更多文本。如果没有项目悬停，则会扩展当前页面。

这是我到目前为止：（https://jsfiddle.net/vajmhfg3/）

＆＃13;

nav {
  background-color: red;
  display: flex;
  width: 350px;
  height: 50px;
}

div {
  flex: 0 0 50px;
  background-color: white;
  border: 1px solid black;
  transition: 400ms;
}

nav:hover>div:hover,
nav:not(:hover)>.current {
  transition: 400ms;
  flex: 1 1;
  background-color: #0A0;
}

＆＃13;

<nav>
  <div>A</div>
  <div class="current">B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</nav>

＆＃13;

将鼠标悬停在一个项目上，然后将鼠标悬停在相邻项目上时，此功能正常。但是，当快速悬停在某个项目上时，将相邻项目移动到两个项目上时，导航项目不会占据导航栏的整个宽度。在演示中，您会看到红色以显示整个宽度。

什么阻止物品占据导航栏的整个宽度？

Answer 1

您的所有孩子都需要flex-grow:1和flex-shrink: 0;。在你想要成长的人身上，放置一个更高的flex-grow。例如：3。

nav {
  background-color: red;
  
  display: flex;
  
  width: 350px;
  height: 50px;
}

div {
  flex: 1 0 auto;
  background-color: white;
  border: 1px solid black;
  
  transition: 400ms;
}

nav:hover > div:hover,
nav:not(:hover) > .current {
  flex: 3 0 auto;
  background-color: #0A0;
  transition: 400ms;
}

<nav>
  <div>A</div>
  <div class="current">B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</nav>

flex-grow越高，推动其他元素越多。拥有flex-grow将使他们总是一直推到他们父母的极限。

这是我第一次发现flexbox时的a little toy。你可能会发现它很有用。您可以在html结构中添加/删除项目并进行调整。

Flex内容大小过渡不填充整个Flex容器

1 个答案: