Flexbox не сбрасывает содержимое после упаковки - PullRequest
Новая
       9

Flexbox не сбрасывает содержимое после упаковки

0 голосов
/ 10 апреля 2020

Извините, если на этот вопрос уже был дан ответ, но я не смог найти похожий. Возникла проблема с flexbox, которая сводит меня с ума. У меня есть два раздела на веб-сайте, верхний раздел содержит строку гибкого контейнера с двумя столбцами, которая оборачивается точкой останова 350px, которую я установил в левом столбце с помощью минимальной ширины. Правый столбец содержит небольшую сетку с 4 элементами. 

section#porque-montiperes {
  position: relative;
  width: 100vw;
  height: 550px;
  margin-top: 150px;
}

section#porque-montiperes .row {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

section#porque-montiperes .row .left-column {
  flex: 1;
  height: 100%;
  min-width: 350px;
  background-image: url(../img/lock.jpg);
  background-size: cover;
  background-position: center;
}

section#porque-montiperes .row .right-column {
  flex: 1;
  display: grid;
  padding: 25px;
  grid-template-columns: 250px 250px;
  grid-template-rows: 50% 50%;
  gap: 10px;
  justify-content: space-evenly;
  max-height: 100%;
}

#latest-works {
  position: relative;
  width: 100vw;
  background: #cc0;
  height: 800px;
  margin-top: 100px;
}
<!--SECTION TOP -->
<section id="porque-montiperes">
  <div class="row">
    <div class="left-column">
      <div class="porque-montiperes-heading">
        <h5>Porquê escolher a</h5>
        <h2>MontiPeres</h2>
        <button class="cta ">
                            Saber mais
                            <img src="img/icons/seta.svg" alt="">
                        </button>
      </div>
    </div>
    <div class="right-column">
      <div class="info-box">
        <img src="img/icons/escudo.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>
          <h5>Qualidade</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box">
        <img src="img/icons/sucesso.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>
          <h5>Experiência</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box">
        <img src="img/icons/cadeado.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>
          <h5>Segurança</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box">
        <img src="img/icons/acordo.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>
          <h5>Profissionalismo</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!--SECTION BOTTOM -->
<section id="latest-works">
  <h1 style="text-align:center;margin-top: 100px;">bottom section</h1>
</section>

Вот что у меня есть до упаковки: enter image description here

Когда происходит обертывание, нижняя часть не толкают, как положено, и я не могу понять, почему. Вот что происходит

enter image description here

Может кто-нибудь помочь мне с этим?

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

В коде, который вы вставили, я также исправил несколько проблем - ваш CSS является вложенным - это МЕНЬШЕ или SASS или что-то еще? Я переключил вашу переменную $ color на серый, чтобы я тоже мог ее использовать.

Но изменение, которое устраняет проблему, находится в строке 3 - вместо этого ваш рост должен быть "min-height", чтобы контент, если потребуется, занимает более 550 пикселей. На самом деле, нижняя часть скрывает переполнение, а не содержимое. 

section#porque-montiperes {
  position: relative;
  width: 100vw;
  min-height: 550px;
  margin-top: 150px;
}

.row
{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.left-column {
  flex: 1;
  height: 100%;
  min-width: 350px;
  background-image: url(../img/lock.jpg);
  background-size: cover;
  background-position: center;
}
.right-column {
  flex: 1;
  display: grid;
  padding: 25px;
  grid-template-columns: 250px 250px;
  grid-template-rows: 50% 50%;
  gap:10px;
  justify-content: space-evenly;
  max-height: 100%;
}

#latest-works {
    text-align:center;
    margin-top: 100px;
    position: relative;
    width: 100vw;
    background: gray;
    height: 800px;
    margin-top: 100px;
}
<section id="porque-montiperes">
  <div class="row">
    <div class="left-column">
      <div class="porque-montiperes-heading">
        <h5>Porquê escolher a</h5>
        <h2>MontiPeres</h2>
        <button class="cta ">
          Saber mais
          <img src="img/icons/seta.svg" alt="">
        </button>
      </div>
    </div>
    <div class="right-column">
      <div class="info-box"> 
        <img src="img/icons/escudo.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>                    
          <h5>Qualidade</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box"> 
        <img src="img/icons/sucesso.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>                    
          <h5>Experiência</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box"> 
        <img src="img/icons/cadeado.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>                    
          <h5>Segurança</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>

      <div class="info-box"> 
        <img src="img/icons/acordo.svg" alt="qualidade montiperes" width="50px" height="50px">
        <div>                    
          <h5>Profissionalismo</h5>
          <p>Quis anim ullamco do commodo deserunt eu culpa Lorem mollit. Deserunt incididunt enim magna consectetur enim deserunt nulla amet anim ullamco incididunt.</p>
        </div>
      </div>
    </div>
  </div>   
</section>

<!--SECTION BOTTOM -->
<section id="latest-works">
  <h1>bottom section</h1>
</section>
0 голосов
/ 10 апреля 2020

Вы можете добавить display: inline-block; к первому section элементу. Надеюсь, это поможет!

...