javascript - 根据内容设置子元素宽度以填充 100% 宽度

Question

我有 9 个项目的导航，我需要使每个导航项目具有它们的内容宽度 + 填充，以便它们可以填充父级的整个宽度。而且它还需要对一定的宽度做出响应。这怎么可能实现？

标签： javascriptcsssass

Answer 1

这是一种可能性——只需将flex-grow每个div数字的数字更改为相应nav元素中的字母数。

nav {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

nav div {
  background-color: grey;
  color: white;
  margin: 2px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
}

#div1 {flex-grow: 4;}
#div2 {flex-grow: 3;}
#div3 {flex-grow: 11;}
#div4 {flex-grow: 10;}
#div5 {flex-grow: 6;}

<nav>
  <div id="div1">Here</div>
  <div id="div2">Are</div>
  <div id="div3">Some Random</div>
  <div id="div4">Navigation</div>
  <div id="div5">Titles</div>
</nav>