it-swarm.com.ru

Flexbox переносит последний столбец первой строки в Safari

Последний столбец первой строки переносится на следующую строку при просмотре в Safari и некоторых других браузерах на базе iOS.

Safari:

 enter image description here

Chrome/Другое:

 enter image description here

Код:

.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;
}
<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>

51
DN.

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

Это решение, с которым я работаю, это, очевидно, исправлено для Bootstrap4, который совместим с flexbox. Так что это только для bootstrap3.

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

Объяснение

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

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

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

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

Решение

В качестве альтернативы принятому ответу я удаляю: before &: after из flex-контейнеров вместо изменения HTML. В твоем случае:

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

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

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

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

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

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

    &:after {
        content: '';
    }
} 
3
Joeri Wauters

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

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

Bootstrap 4 имеет проблемы с отображением: блок; свойство, установленное либо из CSS, либо из JavaScript в классе .row. Я нашел решение для этого Просто создайте класс как:

.display-block {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

А затем примените этот класс, когда вы хотите отобразить строку.

1
Farhan

Я смог это исправить, добавив

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

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

0
ashamun

У меня была та же проблема, и ответ был таков: в окне Flex в Safari не похоже, что поплавки очищаются в том же элементе div, что и display: flex. 

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

Я тоже потратил несколько часов на эту проблему. В моем случае я вставил 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.

0
McVenco

Кажется, это ошибка в рендеринге 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, поэтому я надеюсь, что это поможет.

0
Basil Mohabir