CSS - неточность расчета

Question

У меня есть ul стихия и 5 детей <li>,

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul> имеет display: flex имущество. Я пытался использовать свойство calc на <li> чтобы равномерно определить размер моего списка элементов:

calc:(100% / 5);

Это дает желаемый результат и равномерно измеряет 5 <li> блоки

Теперь я добавил границы с правой стороны всех, но последний ребенок <li> элемент. Таким образом, я уменьшил общую ширину всех границ вместе с общей шириной <ul>,

calc:((100% - 8px) / 5);

Это также работало правильно и равномерно <li> блоки с границами.

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc((100% - 0.8px) / 5);
  height: 100%;
  border-right: 0.2px solid black;
  background: blue;
}

li:last-child {
  border-right: none;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Теперь я попытался установить ширину границы в окне просмотра vw вместо px, но это дает другой результат.

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc((100% - 0.8vw) / 5);
  height: 100%;
  border-right: 0.2vw solid black;
  background: blue;
}

li:last-child {
  border-right: none;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Как видно из фрагмента выше, справа немного места. Это становится больше с более широким окном просмотра (попробуйте просмотреть полную страницу фрагмента). Поэтому я думаю, что проблема заключается в vw единицы и flexbox здесь.

Так в чем же причина этой ошибки?

РЕДАКТИРОВАТЬ:

Из предоставленных ответов и комментариев я увидел, что есть другие и более правильные подходы для достижения того, что я пытался сделать. Я ценю эти ответы, но это не ответы на мой вопрос. поскольку calc показывает ошибку в этом случае, скорее всего, это вызовет больше проблем, когда я пытаюсь использовать calc и единицы просмотра окна в других случаях (не только границы). Поэтому мне нужно знать причину и calc "исправить.

Answer 1

Вам не нужно делать calc, чтобы добавить внутренний контент для вашего li. Если вы даете box-sizing: border-box; опора, бордюр и отступы не заставят контейнер расти.

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc(100% / 5);
  height: 100%;
  border-right: 2px solid black;
  background: blue;
  box-sizing: border-box;
}

li:last-child {
  border-right: none;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 2

Pixels (px): абсолютные пиксели. Так, например, 20 пикселей будет буквально 20 пикселей на любом экране. Если монитор имеет размер 1980x1200 и вы установили высоту элемента в 200 пикселей, из этого элемента будет получено 200 пикселей.

Высота / ширина области просмотра (vw/vh): Размер относительно области просмотра (в основном браузер windoe).

1px = (100 / document.documentElement.clientWidth) vw 1px = (100/500) = 0.2vw

Answer 3

Кажется, вы используете flex раздать свой li внутри твоего ul, В этом случае вам не нужно calc увеличьте ширину, чтобы сделать их равными. Что это flex должен делать.

Смотрите этот пример:

* { box-sizing: border-box; margin: 0; padding: 0; }
ul, li { list-style: none; }
ul { width: 600px; height: 300px; background: red; display: flex; }
li {
  flex: 1 0 auto;
  border-right: 0.8vw solid black;
  background: blue;
}
li:last-child { border-right: none; }

<ul>
  <li></li><li></li><li></li><li></li><li></li>
</ul>

При указании flex dsiplay на контейнерах, вам просто нужно применить flex собственность на детей, чтобы заставить их вести себя как гибкие предметы. В вашем конкретном случае использования вам необходимо следующее:

1. flex-grow: установите в 1. Это позволит вашему li расти, чтобы заполнить весь ul ширина.
2. flex-shrink: установите в 0. Вы не хотите, чтобы ваш li сокращаться.
3. flex-basis: установлен в auto, Вы хотите, чтобы ваш li расти до выровненной ширины автоматически.

Итак, вы видите, вам не нужно calc совсем.

Вам также не нужно специально применять display: block на ваш li s. Согласно спецификации здесь: https://www.w3.org/TR/css-flexbox-1/

Отображаемое значение гибкого элемента блокируется: если заданное отображение дочернего элемента в потоке элемента, генерирующего гибкий контейнер, является значением встроенного уровня, оно вычисляется до его эквивалента на уровне блока

Как отметил @BoltClock в комментариях, элемент списка уже заблокирован.

Границы

Теперь подходит к границам. В первом примере вы указали ширину в 0.2px Блок. Это не имеет никакого смысла. Хотя спецификации допускают дробные пиксели, он округляет его до ближайшего пикселя, доступного на дисплее, который обычно равен 1.

Во втором примере вы хотите, чтобы границы масштабировались с областью просмотра. Это хорошо. Нет проблем с 0.8vw,

Просто посмотрите на пример, который я разместил в этой скрипке. Измените размер окна результатов, и вы увидите, что границы изменяются относительно размера области просмотра.

Наконец, вы можете или не можете установить box-sizing, Это зависит от вашего макета. Что бы вы ни использовали, вы используете это последовательно.