Я попытался реализовать сетку, используя flexbox и sass. Он отлично работает на Chrome, но у меня есть некоторые проблемы с Safari, и красные ящики «переполнены» и не разбиваются на новую строку.Safari/Chrome - сетка Flexbox

Важно, когда окна Safari меньше экрана разрешения, он работает.

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

Safari (горизонтальное переполнение, мы должны прокручивать)

Chrome

<style> 
 
    .flex-parent { 
 
     display: flex; 
 
     display: -webkit-flex; 
 
     flex-direction: row; 
 
     -webkit-flex-direction: row; 
 
     flex-wrap: wrap; 
 
     -webkit-flex-wrap: wrap; 
 
     justify-content: flex-start; 
 
     -webkit-justify-content: flex-start; 
 
     margin-left: -14px; 
 
     margin-top: -14px; 
 
     margin-bottom: 14px; 
 
    } 
 
    .flex-parent .event_card { 
 
     flex: 1 0 345px; 
 
     -webkit-flex: 1 0 345px; 
 
     margin-left: 14px; 
 
     margin-top: 14px; 
 
     padding: 14px; 
 
     box-sizing: border-box; 
 
     height: 140px; 
 
     background: red; 
 
    } 
 
    @media (min-width: 690px) { 
 
     .flex-parent .event_card { 
 
     max-width: calc(50% - 14px); 
 
     } 
 
    } 
 
    @media (min-width: 1035px) { 
 
     .flex-parent .event_card { 
 
     max-width: calc(33.33333333% - 14px); 
 
     } 
 
    } 
 
    @media (min-width: 1035px) { 
 
     .flex-parent .event_card { 
 
     min-width: calc(33.33333333% - 14px); 
 
     } 
 
    } 
 

 
</style>

<html> 
 
    <body> 
 
    <div id="content"> 
 
     <div class="flex-parent feedify-item-body"> 
 
        
 
      <div class="event_card"> 
 
       <div class="wrapper Aligner"> 
 
        <div class="card__front"></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="event_card"> 
 
       <div class="wrapper Aligner"> 
 
        <div class="card__front"></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="event_card"> 
 
       <div class="wrapper Aligner"> 
 
        <div class="card__front"></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="event_card"> 
 
       <div class="wrapper Aligner"> 
 
        <div class="card__front"></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="event_card"> 
 
       <div class="wrapper Aligner"> 
 
        <div class="card__front"></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="event_card"> 
 
       <div class="wrapper Aligner"> 
 
        <div class="card__front"></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="event_card"> 
 
       <div class="wrapper Aligner"> 
 
        <div class="card__front"></div> 
 
       </div> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
    </body> 
 
    </html>

Могли пожалуйста, помогите мне, сообщив мне, что не так, и что может быть решением?

Спасибо

источник

2016-10-22 Léo Coco

Проблема, казалось, связана с

flex: 1 0 345px; 
-webkit-flex: 1 0 345px;

я изменил, что

flex: 1 0 calc(33.33333333% - 14px); 
-webkit-flex: calc(33.33333333% - 14px);

источник

2016-10-23 21:25:08

Safari/Chrome - сетка Flexbox

Safari (горизонтальное переполнение, мы должны прокручивать)

Chrome

ответ

Смежные вопросы