Tengo problemas para hacer que mis cajas se apilen una sobre la otra cuando se reduce a tamaño móvil
La antigua forma de reducir usando @media y establecer el ancho al 100% no parecía funcionar con Flexbox
Aquí está mi 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/
La vista de escritorio tiene 3 cuadros cuadrados iguales uno al lado del otro, cuando en el móvil los cuadros no se apilan
Escritorio: 
3 respuestas
En la consulta de medios elegida, configure la dirección de flexión del elemento de la caja del contenedor en la columna:
@media screen and (max-width: ___rem) {
.box { flex-direction: column; }
}
La dirección de flexión predeterminada es fila, que es en la que se muestran actualmente sus columnas.
https://css-tricks.com/almanac/properties/f/flex-direction/
Estabas muy cerca. Necesita el ancho: 100% en las columnas, pero los elementos del cuadro flexible no se ajustan a las nuevas líneas de forma predeterminada. Debe indicarle que se ajuste en el dispositivo móvil mediante una consulta de medios.
En su consulta de medios móviles, asegúrese de incluir flex-wrap: wrap en el elemento .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>Compruebe esto, ya he corregido esto use flex: 0 0 100%; y max width:100% y flex-wrap: wrap; para el contenido envolvente https://jsfiddle.net/arindam1996/ungarj85/3/. mira este violín ahora