Как сверстать такие кнопки?

Question

подскажите пожалуйста каким образом можно сверстать такие кнопки?

Они должны быть на всю ширину контейнера, но задавать каждой кнопке разный класс и делать фикс ширину думаю неправильно

Answer 1

Используйте flex-grow: 1.

*, ::before, ::after
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.menu__wrapper
{
  display: flex;
  
  list-style: none;
}

.menu__item
{
  flex-grow: 1;

  background-color: #FFFFFF;
  border-bottom: 3px solid transparent;
  padding: 20px;
  text-align: center;
  
  text-transform: uppercase;
}

.menu__item:not(:last-child)
{
  border-right: 2px solid #EFEFEF;
}

.menu__item:hover
{
  cursor: pointer;
  background-color: #ACACAC;
}

.menu__item--active
{
  font-weight: bold;
  border-bottom-color: #6E978F;
}

<nav class="menu">
  <ul class="menu__wrapper">
    <li class="menu__item menu__item--active">Металлопрокат</li>
    <li class="menu__item">Заборы и ограждения</li>
    <li class="menu__item">Кровля</li>
    <li class="menu__item">Профнастил</li>
    <li class="menu__item">Фасад</li>
  </ul>
</nav>

БЛОГ НА HUSL

Как сверстать такие кнопки?

Ответы (1 шт):