Css flex с равным

Question

Мне нужен родитель flex с элементами одинаковой ширины плюс поле, я использовал flex: 1 0 15%, но проблема в том, что я не хочу, чтобы два последних элемента получили полную ширину строки. В первом ряду шесть предметов, верно? второй ряд имеет ширину в два ряда (7 и 8), см. фрагмент ниже:

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

ul li {
  flex: 1 0 15%;
  background: darkseagreen;
  margin: 5px;
  list-style: none;
}

body {
  margin: 0;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

Моя цель - получить этот результат, но с равной шириной. Предпочитаю flex:

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

ul li {
  background: darkseagreen;
  margin: 5px;
  list-style: none;
  width: 15%;
}

body {
  margin: 0;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

Answer 1

flex: 1 0 15%; - это сокращение от flex-grow, flex-shrink и flex-basis.

Если вы хотите, чтобы последние два элемента не росли. Установите flex-grow в 0. Или вы можете сделать это:

ul li {
  flex: 0 0 15%;
}

EDIT: Если вы хотите использовать всю ширину контейнера, вот предложение.

ul li {
  flex: 0 0 calc((100% - 12 * 5px) / 6);
}