Как сделать flexbox отзывчивым и поставить 1 друг на друга

Question

У меня возникают проблемы, когда ящики укладываются друг на друга при уменьшении до размера мобильного устройства

Древний способ уменьшения с помощью @media и установки ширины на 100%, похоже, не работал с Flexbox

Вот мой CSS:

.box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  padding-bottom: 1em;
  text-align: center;
}

.box .column {
  flex: 1;
  background: lightgray;
  margin-right: 1em;
  padding: 1em;
  text-align: center;
}

JS Fiddle: https://jsfiddle.net/p650fdL4/

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

Desktop:

Answer 1

В выбранном вами медиа-запросе установите направление гибкого элемента вашего контейнера контейнера на столбец:

@media screen and (max-width: ___rem) {
    .box { flex-direction: column; }
}

Направление Flex по умолчанию - это строка, в которой отображаются ваши столбцы.

https://css -tricks.com / альманах / свойства / ж / Flex-направление /

Answer 2

Вы были очень близки.Вам нужна ширина: 100% для столбцов, но элементы гибкого блока по умолчанию не переносятся на новые строки.Вы должны указать, чтобы оно было перенесено на мобильный телефон с помощью медиазапроса.

В свой запрос к медиасоединению обязательно включите flex-wrap: wrap в элемент .box

.box { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; padding-bottom: 1em; text-align: center; flex-wrap: wrap;}
.box .column { flex: 1 1 100%; background: lightgray; margin-right: 1em; padding: 1em; text-align: center; }

<div class="box">
            <div class="column">
                <div class="columnBackground">

                    <h3 class="h3Color">We multiply your impact</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
            <div class="column">
                <div class="columnBackground">
                    <h3 class="h3Color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
                    <p>Some info</p>
                </div>
            </div>
            <div class="column">
                <div class="columnBackground">

                    <h3 class="h3Color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
                    <p>Some info</p>
                </div>
            </div>
        </div>

Answer 3

отметьте это, я уже исправил use flex: 0 0 100%; и max width:100% и flex-wrap: wrap; для переноса содержимого https://jsfiddle.net/arindam1996/ungarj85/3/.проверьте эту скрипку сейчас