Блог

Главная - Вопросы по программированию - Сетка Safari / Chrome — Flexbox

Сетка Safari / Chrome — Flexbox

#css #safari #flexbox #saas

#css #safari #flexbox #saas

Вопрос:

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

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

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

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

Safari

Chrome

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>

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

Спасибо

Ответ №1:

Проблема, похоже, была связана с 

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

Я изменил это на

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