根据内容设置子元素宽度以填充 100% 宽度 [关闭]答案

【问题标题】：Set child elements width depending on content to fill 100% width [closed]根据内容设置子元素宽度以填充 100% 宽度 [关闭]
【发布时间】：2020-03-25 21:10:01
【问题描述】：

我有 9 个项目的导航，我需要使每个导航项目的宽度与它们的 content + padding 相同，以便它们可以填充父项的整个宽度。而且它还需要对一定的宽度做出响应。这是如何实现的？

【问题讨论】：

您期待什么结果？当窗口变窄时，您是希望减小内边距或文本大小，还是希望导航项从第二行开始？
将nav的宽度添加为自动，它会自动填满东西。
@Run_Script on resize 减少内边距，当宽度达到 900px 时会切换到手机版

标签： javascript css sass

【解决方案1】：

这是一种可能性 - 只需将每个 div 的 flex-grow 数字更改为相应 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>

【讨论】：

【解决方案2】：

最好在需要的地方使用display:flex 和flex-basis、flex-shrink、flex-grow 属性。

在此处了解有关 CSS 中的 Flexbox 布局模块的更多信息：

https://www.w3schools.com/css/css3_flexbox.asp

这里有额外的教程：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：