0

Не могу никак решить проблему, использовал отрицательные margin для flex контейнера и padding для flex элементов чтобы сделать расстояние между ними, но при уменьшении окна просмотра появляется горизонтальное окно прокрутки и блок содержащий колонки становится меньше чем его содержимое

HTML


<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/stylesheet.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
    </head>
    <body>
        <main class="main">
            <div class="services">
                <div class="services__container container">
                    <div class="services__header decor-title">
                        <div class="decor-title__title title">
                            <div class="title__item">Популярные</div>
                            <h2 class="title__main title__main_w">Лоты на аукцион</h2>
                        </div>
                        <div class="decor-title__decor decor-block">
                            <div class="decor-block__decor">
                                <span></span>
                            </div>
                            <div class="decor-block__icon">
                            </div>
                            <div class="decor-block__decor decor-block__decor_r">
                                <span></span>
                            </div>
                        </div>
                    </div>
                    <div class="services__body">
                        <div class="services__row">
                            <div class="services__column">
                                <div class="services__item item-services">
                                    <div class="item-services__icon">
                                        <img src="img/human.jpg" alt="">
                                    </div>
                                    <div class="item-services__title">Экспертная оценка</div>
                                    <div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
                                    <a href="#" class="item-services__link"><span>Подробнее</span></a>
                                </div>
                            </div>
                            <div class="services__column">
                                <div class="services__item item-services">
                                    <div class="item-services__icon">
                                        <img src="img/human.jpg" alt="">
                                    </div>
                                    <div class="item-services__title">Экспертная оценка</div>
                                    <div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
                                    <a href="#" class="item-services__link"><span>Подробнее</span></a>
                                </div>
                            </div>
                            <div class="services__column">
                                <div class="services__item item-services">
                                    <div class="item-services__icon">
                                        <img src="img/human.jpg" alt="">
                                    </div>
                                    <div class="item-services__title">Экспертная оценка</div>
                                    <div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
                                    <a href="#" class="item-services__link"><span>Подробнее</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

        <script src="js/script.js"></script>
    </body>
</html>

SCSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    max-width: 970px;

    
    margin: 0 auto;
    padding: 0 10px;

}
html {
}

.services {
    padding: 40px 0 60px;
    background-color: #1c242a;
    &__container {}
    &__header {
        margin: 0 0 40px 0;
    }
    &__body {}
    &__row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -50px;
    }
    &__column {
        padding: 0 50px;
        flex: 0 1 33.333%;


        margin: 0 0 40px;

    }
    @media(max-width: 980px) {
        &__column {
            flex: 0 1 50%;
        }         
    }
    @media(max-width: 650px) {
        &__column {
            flex: 0 1 100%;
        }
    }

    &__item {
        
    }
}
.item-services {
    height: 100%;
    
    display: flex;
    flex-direction: column;
    text-align: center;

    color: #fff;
    &__icon {
        margin: 0 0 10px 0;

        display: flex;
        align-items: center;
        justify-content: center;

        img {
            height: 165px;
            width: 165px;
            max-width: 100%;
        }
    }
    
    &__title {
        margin: 0 0 15px 0;

        font-size: 1.25rem;
        text-transform: uppercase;
    }
    &__text {
        color: goldenrod;
        text-align: center;
        flex: 1 1 auto;


        margin: 0 0 20px 0;

    }
    &__link {
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 0.0625em;

        position: relative;

        span {
            padding: 0 10px 0;

            position: relative;
            z-index: 2;

            background: #1c242a;
        }

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;

            width: 100%;
            height: 1px;
            
            background-color: goldenrod;
        }
    }
}

1 ответ 1

0

Потому-что нельзя давать -50px; при сужении margin использует внешние отступы, а значит окно равно "100% + 50px * 2".
В общем используйте "display: grid" для формирования блоков. Это вас избавит от вычисления разницы ширины относительно отступам.
Сейчас такое время, когда уже не правильно отступы делать через margin
Также скину ссылку посмотреть как это можно сделать и на "display: flex"
Красивое расположение элементов через flex и grid контейнеры

.services {
  padding: 40px 0 60px;
  background-color: #1c242a;
}
.services__header {
  margin: 0 0 40px 0;
}
.services__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.services__column {
  background-color: lightblue;
  padding: 15px;
}
@media(max-width: 980px) {
  .services__row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width: 650px) {
  .services__row {
    grid-template-columns: 1fr;
  }
}
<main class="main">
  <div class="services">
      <div class="services__container container">
          <div class="services__header decor-title">
              <div class="decor-title__title title">
                  <div class="title__item">Популярные</div>
                  <h2 class="title__main title__main_w">Лоты на аукцион</h2>
              </div>
              <div class="decor-title__decor decor-block">
                  <div class="decor-block__decor">
                      <span></span>
                  </div>
                  <div class="decor-block__icon">
                  </div>
                  <div class="decor-block__decor decor-block__decor_r">
                      <span></span>
                  </div>
              </div>
          </div>
          <div class="services__body">
              <div class="services__row">
                  <div class="services__column">
                      <div class="services__item item-services">
                          <div class="item-services__icon">
                              <img src="img/human.jpg" alt="">
                          </div>
                          <div class="item-services__title">Экспертная оценка</div>
                          <div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
                          <a href="#" class="item-services__link"><span>Подробнее</span></a>
                      </div>
                  </div>
                  <div class="services__column">
                      <div class="services__item item-services">
                          <div class="item-services__icon">
                              <img src="img/human.jpg" alt="">
                          </div>
                          <div class="item-services__title">Экспертная оценка</div>
                          <div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
                          <a href="#" class="item-services__link"><span>Подробнее</span></a>
                      </div>
                  </div>
                  <div class="services__column">
                      <div class="services__item item-services">
                          <div class="item-services__icon">
                              <img src="img/human.jpg" alt="">
                          </div>
                          <div class="item-services__title">Экспертная оценка</div>
                          <div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
                          <a href="#" class="item-services__link"><span>Подробнее</span></a>
                      </div>
                  </div>
                  <div class="services__column">
                      <div class="services__item item-services">
                          <div class="item-services__icon">
                              <img src="img/human.jpg" alt="">
                          </div>
                          <div class="item-services__title">Экспертная оценка</div>
                          <div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
                          <a href="#" class="item-services__link"><span>Подробнее</span></a>
                      </div>
                  </div>
                  <div class="services__column">
                      <div class="services__item item-services">
                          <div class="item-services__icon">
                              <img src="img/human.jpg" alt="">
                          </div>
                          <div class="item-services__title">Экспертная оценка</div>
                          <div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
                          <a href="#" class="item-services__link"><span>Подробнее</span></a>
                      </div>
                  </div>
                  <div class="services__column">
                      <div class="services__item item-services">
                          <div class="item-services__icon">
                              <img src="img/human.jpg" alt="">
                          </div>
                          <div class="item-services__title">Экспертная оценка</div>
                          <div class="item-services__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla?</div>
                          <a href="#" class="item-services__link"><span>Подробнее</span></a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</main>

10
  • В таком случае невозможно будет сделать адекватный перенос элементов grid-а на новую строку с сохранением нужной ширины элемента!?
    – Alegro
    18 апр в 12:22
  • А вы результат посмотрите, там две строки, я специально добавил ещё 3 строки, что бы наглядно показать. 18 апр в 12:24
  • grid-template-columns: 1fr 1fr 1fr; - это количество блоков в строке, если больше трёх, значит перенос на следующую строку. В адаптиве, когда нужно 2 блока на строку пишете - grid-template-columns: 1fr 1fr;. Или можно писать проще grid-template-columns: repeat(3, 1fr); - это значит повторить 3 раза по 1fr 18 апр в 12:30
  • ну так оно не переносится на новую строку при уменьшении окна просмотра как у моего варианта.
    – Alegro
    18 апр в 12:35
  • Так Медиа запросы не сделаны же. Сейчас сделаю 18 апр в 12:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.