Flexbox space-ween имеет дополнительный разрыв в 1px в конце при использовании calc()

Question

Flexbox space-ween имеет дополнительный разрыв в 1px в конце при использовании calc()

Я разрабатывал систему сетки с использованием flexbox justify-content: space-between; и я заметил, что на определенных размерах экрана (примерно на каждом пикселе) в конце некоторых столбцов появляется 1 пиксельный зазор.

Если вы начнете изменять размер своего браузера с помощью приведенного ниже примера, вы увидите, что пространство в 1 пиксель появляется и исчезает.

пример

* {
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  border: 2px solid #888;
  justify-content: space-between;
}

div[class^="col"] {
  border: 2px solid red;
}

.col-12 {
  flex-basis: calc(100% - 4px);
}

.col-11 {
  flex-basis: calc(11/12*100% - (1.167 - 11/12)*24px);
}

.col-10 {
  flex-basis: calc(5/6*100% - (1.167 - 5/6)*24px);
}

.col-9 {
  flex-basis: calc(3/4*100% - (1.167 - 3/4)*24px);
}

.col-8 {
  flex-basis: calc(2/3*100% - (1.167 - 2/3)*24px);
}

.col-7 {
  flex-basis: calc(7/12*100% - (1.167 - 7/12)*24px);
}

.col-6 {
  flex-basis: calc(1/2*100% - (1.167 - 1/2)*24px);
}

.col-5 {
  flex-basis: calc(5/12*100% - (1.167 - 5/12)*24px);
}

.col-4 {
  flex-basis: calc(1/3*100% - (1.167 - 1/3)*24px);
}

.col-3 {
  flex-basis: calc(1/4*100% - (1.167 - 1/4)*24px);
}

.col-2 {
  flex-basis: calc(1/6*100% - (1.167 - 1/6)*24px);
}

.col-1 {
  flex-basis: calc(1/12*100% - (1.167 - 1/12)*24px);
}

<div class="row">
  <div class="col-12">col-12</div>
  <div class="col-6">col-6</div>
  <div class="col-6">col-6</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-4">col-4</div>
  <div class="col-8">col-8</div>
  <div class="col-7">col-7</div>
  <div class="col-5">col-5</div>
  <div class="col-6">col-6</div>
  <div class="col-4">col-4</div>
  <div class="col-2">col-2</div>
</div>

Вот рабочая скрипка, так что вы можете изменить ее размер более легко.

JSFiddle

* Примечание: я знаю, что делаю сумасшедшие вещи с calc(), но даже если вы просто вычтите 5px вместо (1.167 - 1/12)*24px) проблема все еще существует.

Это ошибка с flexbox?

Что мне нужно сделать, чтобы убрать пробел в конце этих столбцов?

10

css flexbox css-calc space-between

Источник

user5269843 19 июн '19 в 17:55

2 ответа

Решение

Ваша проблема с col-3 и col-6

до:

.col-3 {
  flex-basis: calc(1/4*100% - (1.167 - 1/4)*24px);
}

после:

.col-3 {
  flex-basis: calc(1/4*100% - (1.167 - 1/4)*25px);
}

попробуй:

* {
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  border: 2px solid #888;
  justify-content: space-between;
}

div[class^="col"] {
  border: 2px solid red;
}

.col-12 {
  flex-basis: calc(100% - 4px);
}

.col-11 {
  flex-basis: calc(11/12*100% - (1.167 - 11/12)*24px);
}

.col-10 {
  flex-basis: calc(5/6*100% - (1.167 - 5/6)*24px);
}

.col-9 {
  flex-basis: calc(3/4*100% - (1.167 - 3/4)*24px);
}

.col-8 {
  flex-basis: calc(2/3*100% - (1.167 - 2/3)*24px);
}

.col-7 {
  flex-basis: calc(7/12*100% - (1.167 - 7/12)*24px);
}

.col-6 {
  flex-basis: calc(1/2*100% - (1.167 - 1/2)*25px);
}

.col-5 {
  flex-basis: calc(5/12*100% - (1.167 - 5/12)*24px);
}

.col-4 {
  flex-basis: calc(1/3*100% - (1.167 - 1/3)*24px);
}

.col-3 {
  flex-basis: calc(1/4*100% - (1.167 - 1/4)*25px);
}

.col-2 {
  flex-basis: calc(1/6*100% - (1.167 - 1/6)*24px);
}

.col-1 {
  flex-basis: calc(1/12*100% - (1.167 - 1/12)*24px);
}

0

Источник

user6934495 07 июл '19 в 22:44

Другие вопросы по тегам css flexbox css-calc space-between

user9538369 10 июл '19 в 01:26 2019-07-10 01:26 · Accepted Answer · 2019-07-10 01:26

Проблема

Я немного поиграл с этой проблемой, прежде чем пришел к решению. Шаги следующие:

Сначала я преобразовал все, чтобы использовать стандартный формат

calc(a/12 * 100% - (7/6 - a/12) * 24px) где a = "col number"

Затем я начал экспериментировать с числом, чтобы увидеть фактический результат без единиц (конечно)

1: -17,6666...
2: -7,3333...
3: 3
4: 13,3333...
5: 23,6666...
6: 34
7: 44,3333...
8: 54,6666...
9: 65
10: 75,3333...
11: 85,6666...
12: 96

Форма это мы можем увидеть три вещи

Любое число, делимое на 3, является целым числом
Следующий номер заканчивается повторением x.3333...
Второй номер заканчивается x.6666...

Примечание: 1 и 2 являются особыми случаями и обращаются вспять, потому что их выходные данные на самом деле отрицательны. Мы можем предположить, что их число будет положительным в реальном мире и будет соответствовать другим

После этого точно определить фактическую проблему в уравнении было легко: a/12 * 100%

Таким образом, проблема округления является вашей проблемой - т.е. когда вы используете два или более чисел, оканчивающихся на x.3333...

Исправление

Мы бы хотели, чтобы эти ошибки округления не каскадировались, поэтому у нас есть несколько вариантов

Добавьте вычитание значений, чтобы получить среднее число
Добавьте половину пикселя, чтобы уменьшить ошибку, и, надеюсь, округлите проблему (добавьте только половину пикселя к числам, оканчивающимся на x.3333...)

Примеры:

flex-basis: calc((8/12 - 1/6/100) * 100% - (7/6 - 8/12) * 24px);
flex-basis: calc(8/12 * 100% - (7/6 - 8/12) * 24px);

Я пошел с первым примером, чтобы дать мне этот повторяющийся код:

* {
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  border: 2px solid #888;
  justify-content: space-between;
}

div[class^="col"] {
  border: 2px solid red;
}

.col-12 {
    flex-basis: calc(12/12 * 100% - (7/6 - 12/12) * 24px);
}
.col-11 {
    flex-basis: calc((11/12 - 1/6/100) * 100% - (7/6 - 11/12) * 24px);
}
.col-10 {
    flex-basis: calc((10/12 + 1/6/100) * 100% - (7/6 - 10/12) * 24px);
}
.col-9 {
    flex-basis: calc(9/12 * 100% - (7/6 - 9/12) * 24px);
}
.col-8 {
    flex-basis: calc((8/12 - 1/6/100) * 100% - (7/6 - 8/12) * 24px);
}
.col-7 {
    flex-basis: calc((7/12 + 1/6/100) * 100% - (7/6 - 7/12) * 24px);
}
.col-6 {
    flex-basis: calc(6/12 * 100% - (7/6 - 6/12) * 24px);
}
.col-5 {
    flex-basis: calc((5/12 - 1/6/100) * 100% - (7/6 - 5/12) * 24px);
}
.col-4 {
    flex-basis: calc((4/12 + 1/6/100) * 100% - (7/6 - 4/12) * 24px);
}
.col-3 {
    flex-basis: calc(3/12 * 100% - (7/6 - 3/12) * 24px);
}
.col-2 {
    flex-basis: calc((2/12 - 1/6/100) * 100% - (7/6 - 2/12) * 24px);
}
.col-1 {
    flex-basis: calc((1/12 + 1/6/100) * 100% - (7/6 - 1/12) * 24px);
}

<div class="row">
  <div class="col-12">col-12</div>
  <div class="col-6">col-6</div>
  <div class="col-6">col-6</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-3">col-3</div>
  <div class="col-4">col-4</div>
  <div class="col-8">col-8</div>
  <div class="col-7">col-7</div>
  <div class="col-5">col-5</div>
  <div class="col-6">col-6</div>
  <div class="col-4">col-4</div>
  <div class="col-2">col-2</div>
</div>

Это должно работать в современных и даже в самых старых браузерах, которые поддерживают calc

Если вы хотите увидеть второе решение, просто оставьте комментарий, и я опубликую его.

Примечание: если вы можете, было бы лучше использовать язык вроде sass или менее для выполнения этих вычислений, как они после округления, а также функции для хранения всей этой тяжелой работы в одном месте.