Tengo mi cartera pero no soy buena con CSS.

Estoy usando Flexbox para hacer el diseño de escritorio y móvil, pero no funciona ...

Es así, como quiero, usando flex-direction: column ,: ingrese la descripción de la imagen aquí

Código del padre div:

display: flex;
justify-content:center;
align-items:center;
background-color:#C4C4C4;
min-height: 100vh;
flex-direction: column;

Pero cuando pongo en respuesta, se mantiene así: Los elementos fuera de div parent .. ingrese la descripción de la imagen aquí

El código es el mismo, solo cambia el color de fondo.

background-color: red;
width:800px;
height:650px;
margin: 30px;

No se queda corrige.

Si no uso el flex-direction: column, queda así: ingrese la descripción de la imagen aquí

Alguien por que?

2
Jota 16 sep. 2018 a las 05:57

3 respuestas

La mejor respuesta

Su problema principal faltaba max-width: 100%; en los elementos secundarios para que width:800px no desbordara el contenedor principal, eche un vistazo al fragmento

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #C4C4C4;
  min-height: 100vh;
  padding: 15px 30px;
  box-sizing: border-box;
}

@media(max-width:800px) {
  section {
    flex-direction: column;
  }
}

div {
  max-width: 100%;
  width: 800px;
  height: 650px;
  margin: 15px
}

div:first-of-type {
  background-color: red;
}

div:last-of-type {
  background-color: blue
}
<section>
  <div>red</div>
  <div>blue</div>
</section>
2
dippas 16 sep. 2018 a las 03:31

Asegúrese de establecer un ancho para todos sus contenedores; parece que quiere que el contenedor gris llene la ventana gráfica y que los bloques se distribuyan de manera uniforme.

Este es un ejemplo de trabajo:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  background-color: gray;
  width: 100vw;
  height: 100vh;
}

.block {
  background-color: #C4C4C4;
  min-height: 33vh;
  width: 90vw;
}
<div class="container">
  <div class="block" style="background-color: red">
    A
  </div>
  <div class="block" style="background-color: blue">
    B
  </div>
</div>
0
Trent 16 sep. 2018 a las 03:36

Max-width no establece el ancho de los elementos secundarios.

0
Abuhafs 16 sep. 2018 a las 03:31