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

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

9 голосов
/ 19 июня 2019

Я разрабатывал сеточную систему, используя 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?

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

Ответы [ 2 ]

2 голосов
/ 10 июля 2019

Проблема

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

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

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 являются особыми случаями и обращаются вспять, потому что их вывод на самом деле negative.Мы можем предположить, что их числа будут положительными в реальном мире и будут совпадать с другими

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

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

Исправление

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

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

Примеры:

  1. flex-basis: calc((8/12 - 1/6/100) * 100% - (7/6 - 8/12) * 24px);
  2. 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 или менее для выполнения этихрасчеты, как они после округления, а также функции, чтобы держать всю эту тяжелую работу в одном месте.

0 голосов
/ 07 июля 2019

ваша проблема с 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);
}
...