Установите ширину дочерних элементов в зависимости от содержимого, чтобы заполнить ширину 100%

Question

У меня есть навигация с 9 элементами, и мне нужно, чтобы каждый элемент навигации имел ширину их content + padding , чтобы они могли заполнить всю ширину родительского элемента. А также он должен реагировать на определенную ширину. Как этого достичь?

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>

Answer 2

Лучше всего использовать свойства display:flex и flex-basis, flex-shrink, flex-grow там, где это необходимо.

Подробнее о модуле макета Flexbox см. CSS здесь:

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

Дополнительный учебник здесь:

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