Застрял на ответственных гибких коробках

Question

возникла проблема с обертыванием flexbox, когда ширина слишком мала, чтобы отобразить оба.Вот полноэкранный экран: Показывает полноэкранный сайт

Так вот, что произойдет, если уменьшить ширину браузера: уменьшенная ширина

Теперь,если я снова уменьшу ширину, это будет выглядеть так: 1 мм больше, чем раньше

Но, конечно, это должно быть между собой.

body {
  background-color: aquamarine;
}

#Wrapper,
body,
html,
main,
nav,
header,
div,
class,
footer {
  margin: 0;
  padding: 0;
}

main {}

header h1 {
  position: relative;
  width: 50%;
  top: 8vh;
  left: 25%;
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: 'Bree Serif', serif;
  color: deeppink;
}

.Container {
  position: absolute;
  top: 25%;
  left: 30vw;
  display: flex;
  height: 50%;
  width: 40%;
  flex-flow: row wrap;
  justify-content: space-between;
}

.item {
  width: 16em;
  background-color: lightslategrey;
}

<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">

<div id="Wrapper">
  <header>
    <nav>
    </nav>
    <h1>This is a heading and it's extra long to test stuff.</h1>
  </header>
  <main>
    <div class="Container">
      <div class="item">
      </div>
      <div class="item">
      </div>
    </div>
  </main>
</div>

Answer 1

Я вижу несколько проблем с вашим CSS, которые вызывают такое поведение у ваших блоков item .Основная проблема заключается в том, что вы ограничиваете свой контейнер шириной 40%, а затем, когда вы изменяете размер окна, нет места для правильного отображения внутренних блоков.Я бы дал полную ширину: 100% контейнеру, слева: 0 и justify-content: center .Тогда я бы дал поля влево и вправо внутренним элементам.

Итак, ваш CSS примерно такой:

.Container {
    position: absolute;
    top: 25%;
    left: 0;
    display: flex;
    height: 50%;
    width: 100%;
    flex-flow: row wrap;
    justify-content: center;
}

.item {
    width: 16em;
    background-color: lightslategrey;
    margin: 0 30px;
}

Это частично решает проблему, поскольку ваши внутренние блоки все еще перекрываются, если вы уменьшаете размер окна.Чтобы решить это по-настоящему, вам, вероятно, понадобится mediaquery , чтобы уменьшить внутренние поля при изменении размера окна.

Это может быть что-то вроде этого:

@media all and (max-width: 650px) {
  .item {
        width: 8em;
  }
}

Вот кодекс, чтобы вы могли увидеть результаты: https://codepen.io/annabranco/pen/VEjXOL