Горизонтальный ul список с заполнением всего ряда, как правильно?

#html #css #flexbox

Имеется горизонтальный ul список, заданный через flex. Как грамотно указать li, чтобы
они заполняли все горизонтальное пространство?



* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

ul {
  list-style-type: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
}

.list {
  display: flex;
  background: #ffd3d4;
}

.item {
  display: block;
  padding: 10px 20px;
  background: #f5c6ff;
}

  
Главная
  
Услуги
  
Информация
  
Новости
  
Контакты




    

Ответы

Ответ 1

Нужно добавить подходящее для этого свойство flex-grow:



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

html,
body {
  width: 100%;
  height: 100%;
}

.list {
  list-style-type: none;
  display: flex;
  background: #ffd3d4;
}

.item {
  padding: 10px 20px;
  background: #f5c6ff;
  flex-grow: 1;
}

  
Главная
  
Услуги
  
Информация
  
Новости
  
Контакты