flexbox добавляет 1px левое поле в Safari

Question

У меня возникли проблемы с Safari, добавив 1px margin/gap влево на первом элементе в строке flexbox. Я приложил изображение ниже выпуска:

Гибкая коробка КСС:

.equal-height { 
     display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
     display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
     display: -ms-flexbox;  /* TWEENER - IE 10 */ 
     display: -webkit-flex;  /* NEW - Chrome */ 
     display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
     -webkit-flex-direction: row; 
     -webkit-flex-wrap: wrap; 
     flex-direction: row; 
     flex-wrap: wrap; 
    } 

Ребенок элементы устанавливаются следующим образом:

.child-div { 
    float: left; 
    display: block; 
    width: 33.3333%; 
    box-sizing: border-box; 
} 

Но они я заметил, что они вычисляются без поплавка

Answer 1

file: style.css; линия: 1028

.row:before, .row:after{ 
    content: " "; 
    display: table; 
} 

добавить:

width: 100% 

и теперь "запас" решается.

В системе сетки у вас есть проблемы с сафари: измените ее.

Надеюсь, я помог вам.

Answer 2

Причина, по которой они вычисляются без поплавка, заключается в том, что flex отменяет их. По flexbox spec:

поплавка и ясно, не оказывает никакого влияния на гибкий пункте, и не принимать его вне потока. Однако свойство float все равно может влиять на формирование окна , влияя на вычисляемое значение свойства отображения.

Так ширина 100% на гибкий контейнер согласно Майкл в порядке, но если вы хотите Flexbox, что вы хотите:

.child-div { 
     width: 33.3333%; 
     box-sizing: border-box; 
     -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
     -webkit-flex: 1 1 auto; 
     -ms-flex: 1 1 auto; 
     flex: 1 1 auto; 
} 

т.е. Вы должны использовать либо поплавки или гибкий, но не и то и другое.

Возможно, вы захотите ознакомиться с этим flexbox generator, чтобы понять, как работает flex.

Answer 3

Я тоже это заметил. Вот что работает для меня:

.row:before, .row:after { 
    display: none; 
}