Как гибко обернуть эти дочерние элементы при изменении размера

Question

Мне нужно обернуть дочерние элементы на меньших устройствах, но даже когда я установил flex-wrap, они не переходят на следующий ряд. Как переместить их в следующий ряд при изменении размера и сложить их один за другим на мобильном телефоне. Пожалуйста, смотрите код ручки. https://codepen.io/Nickbing/pen/KKKdyVm

.container {
  padding: 5rem;
  width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.child {
  text-align: center;
  background-color: grey;
  flex: 1;
  margin-right: 2rem;
}

<div class="container">
  <div class="content">
    <div class="child">
      <h1>1</h1>
    </div>
    <div class="child">
      <h1>2</h1>
    </div>
    <div class="child">
      <h1>3</h1>
    </div>
    <div class="child">
      <h1>4</h1>
    </div>
  </div>
</div>

Answer 1

Ваш основной гибкий контейнер (.container) имеет фиксированную ширину 1200 пикселей.

Ваш вложенный гибкий контейнер (.content), для которого задана упаковка, имеет ширину 100%.

Поскольку основной контейнер негибкий (он никогда не будет уменьшаться), вложенный контейнер также никогда не будет уменьшаться (это всегда 100% от 1200 пикселей), и элементы никогда не будут сдвинуты на следующую строку.

Укажите для основного контейнера гибкую ширину, а для вложенных контейнеров - минимальную ширину, и тогда они будут вынуждены обернуться.

.container {
  padding: 5rem;
  /* width: 1200px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.child {
  text-align: center;
  background-color: grey;
  flex: 1 0 100px; /* adjustment */
  margin-right: 2rem;
}

<div class="container">
  <div class="content">
     <div class="child">
      <h1>1</h1>
    </div>
    <div class="child">
      <h1>2</h1>
    </div>
    <div class="child">
      <h1>3</h1>
    </div>
    <div class="child">
      <h1>4</h1>
    </div>
  </div>
</div>

jsFiddle demo

Answer 2

Прежде всего, не устанавливайте ширину container в какое-либо значение. Он всегда устанавливает ширину этого значения и никогда не сжимается ниже этого значения. Сделайте это вместо:

body {
   width: 100vw;
} 

.container {
   padding: 5rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

Затем используйте media queries для мобильного телефона:

@media screen and (max-width: 799px) {
    .content {
       flex-direction: column; 
    }

    .child {
       margin-bottom: 1rem;
    }
 }