Hello. Before me is such a task: There are 3 menu buttons in the navbar. I want to distribute them evenly across the width of the screen (parent unit), but they (li elements themselves) must also be stretched across the width so as to occupy all the space. As if I set them width: 33.33%, only that the width depends on the filling. Is it possible to register some kind of logic (maybe using js) of the type width1_new = width1 / (width1 + width2 + width3) * 100%? Other solutions to my problem are also welcome, since I still wanted to achieve such a result without javascript. Maybe you can put some padding on li?

ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: space-around; } li { list-style-type: none; display: inline-block; border: 1px solid black; background-color: gray; /*width: 33%;*/ } 
 <ul> <li> <a href="#">PROFESSIONS</a> </li> <li> <a href="#">KNOWLEAGE BASE</a> </li> <li> <a href="#">PEOPLE</a> </li> </ul>

    2 answers 2

    Set flex-grow:1; rule for children of flex-grow:1;

     ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: space-around; } li { list-style-type: none; border: 1px solid black; background-color: gray; flex-grow: 1; } 
     <ul> <li> <a href="#">PROFESSIONS</a> </li> <li> <a href="#">KNOWLEAGE BASE</a> </li> <li> <a href="#">PEOPLE</a> </li> </ul>

      Standard situation for flexbox

       * { list-style: none; text-decoration: none; box-sizing: border-box; margin: 0; padding: 0; } ul { display: flex; justify-content: space-around; width: 100%; } ul li { width: 100%; padding: 10px 0; text-align: center; } ul li:first-child { background: pink; } ul li:nth-of-type(2) { background: lightgreen; } ul li:nth-of-type(3) { background: lightblue; } ul li a { display: block; width: 100%; height: 100%; } 
       <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> <li><a href="">item3</a></li> </ul>

      • about the right answer - except for flex-grow and width: 100% the same if you are talking about this - MaximLensky
      • Thank you very much) - Maxim Lukyanovich