Ошибка Flexbox Safari (flex-wrap)

Question

Я не знаю, почему, но Safari всегда смещает элементы.

Safari:

Chrome (& другие):

Код:

<div class="row flexthis"> 
    <div class="col-md-4 col-sm-6 text-center"> 
    <div class="product"> 
     <img src="img.jpg" alt="" class="img-responsive"> 
     <h3>Name</h3> 
     <p>Description</p> 
    </div> 
    </div> 
</div> 
<style> 
    .flexthis{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    } 

    .flexthis .col-md-4{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    } 
</style> 

Answer 1

Просто обновить на мой вопрос

Это решение я иду с, это, очевидно, фиксируется на Bootstrap4, что Flexbox совместимы. Так что это только для bootstrap3.

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

Answer 2

Это кажется ошибка в визуализации в Safari заставляя столбцы переполняться (и, следовательно, обертывать) контейнер Bootstrap (возможно, какая-то ошибка округления Webkit?). Поскольку вы используете Bootstrap, вы должны иметь возможность достичь желаемого результата без использования flex:

<div class="row"> 
    <div class="col-md-4 col-sm-6 text-center"> 
     <div class="product"> 
      <img src="img.jpg" alt="" class="img-responsive"> 
      <h3>Name</h3> 
      <p>Description</p> 
     </div> 
    </div> 
</div> 
<style> 
    .product { 
     /* this is to automatically center and prevent overflow 
      on very narrow viewports */ 
     display: inline-block; 
     max-width: 100%; 
    } 
</style> 

Но! Теперь проблема, касающаяся вашего примера, заключается в том, что вам нужно, чтобы ваши блоки продуктов были одинакового размера, или сетка не сохранит свою форму. Одно из возможных решений - дать .product фиксированную высоту и настроить с помощью мультимедийных запросов.

Вот пример, который я сделал, что работает в Safari и других браузерах: http://codepen.io/anon/pen/PZbNMX Кроме того, вы можете использовать правило стиля, чтобы сохранить изображение или текст описания в пределах определенного размера, чтобы сделать вещи проще в обслуживании.

Другим возможным решением является использование сценария или плагина jQuery для обеспечения более динамичного единообразного размера, но я не так сообразителен в этом.

Я столкнулся с тем же вопросом, пытаясь объединить flex и Bootstrap с помощью Safari, поэтому я надеюсь, что это поможет.

Answer 3

Объяснение

Это происходит потому, что Safari лечит: до и: после псевдо-элементов, как если бы они были реальными элементами. Например. подумайте о контейнере с 7 элементами. Если контейнер имеет: до и: после того, как Safari будет позиционировать элементы, как это:

[:before ] [1st-item] [2nd-item] 

[3rd-item] [4th-item] [5th-item] 

[6th-item] [7th-item] [:after ] 

Решение

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

.flexthis.container:before, 
.flexthis.container:after, 
.flexthis.row:before, 
.flexthis.row:after { 
    content: normal; // IE doesn't support `initial` 
} 

Answer 4

Я знаю, что проблема довольно старая, но я столкнулся с этим вопросом сегодня, и впустую более 12 часов в фиксируя его. Хотя около 10 часов из этого были потрачены на понимание того, что сафари не работает с 12-колоночной бутстрап-сеткой, и это не проблема.

Исправление, которое я сделал, довольно простое. Вот версия для Visual Composer. Имена классов могут отличаться для других фреймворков.

.vc_row-flex:before, .vc_row-flex:after{ 
    width: 0; 
} 

Answer 5

Я не хотел бы добавить несколько классов, чтобы исправить такую ​​ошибку, так же вы можете зафиксировать сам .row класс.

.row { 
    &:before { 
     content: none; 
    } 

    &:after { 
     content: ''; 
    } 
} 

Answer 6

У меня была такая же проблема, и ответ был, что Flex окно на сафари, кажется, не нравится поплавки очищаются на той же DIV, который дисплей: прогибается.

Answer 7

Нашел эту проблему, пытаясь сделать простую сетку, используя Bootstrap для CMS TwentyThree, и получил ту же ошибку в Safari. Во всяком случае, это решить это для меня:

.flex-container:before { 
    display: inline; 
} 

Answer 8

.row:before, .row:after { 
content:''; 
display:block; 
width:100%; 
height:0; 
} 
.row:after { 
clear:both; 
} 

Answer 9

Я был в состоянии это исправить, добавив

.row:before, .row:after { 
display: flex !important; 
} 

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

Answer 10

Я потратил несколько часов на этот вопрос. В моем случае я вставил flexbox в существующий проект, чтобы все элементы в row имели одинаковую высоту. Все браузеры, кроме Safari, отображали его правильно, но ни один из вышеперечисленных ответов, похоже, не устранил мою проблему.

Пока я не обнаружил, что до сих пор было Bootstrapclearfix хак используется: (код из laravel проекта, но общий Bootstrap иначе)

@foreach ($articles as $key => $article) 
    @if ($key % 3 === 0) 
     <div class="clearfix hidden-xs hidden-sm"></div> 
    @endif 
    @if ($key % 2 === 0) 
     <div class="clearfix hidden-lg hidden-md"></div> 
    @endif 

    etc... 
@endforeach 

По-видимому, другие браузеры, чем Safari игнорировать .clearfix в некоторых когда используется flexbox.

Таким образом, при использовании flexbox в ваших столбцах больше не нужно использовать clearfix для Bootstrap.