5

Hola estoy intentando hacer una pagina responsive.Tengo un contenedor con 5 divs, en la vista movil muestro uno debajo del otro. Lo que no me sale es cuando la pantalla es mayor o igual a 600px, quiero que el div 1 ocupe el 100% y los demas ocupen solo el 50% del ancho. De forma que se vea 1 div arriba, y abajo 2 div uno al lado del otro por cada fila. Pero no consigo que los div se muestren uno al lado del otro. Esto es lo que tengo hecho.

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  border: solid red 1px;
  width: 800px;
}

.columna1, 
.columna2, 
.columna3, 
.columna4, 
.columna5 {
  width: 100%;
  border: solid red 1px;
  margin: 10px;
  background-color: green;
}

@media (min-width: 600px) {
  .columna2,
  .columna3, 
  .columna4, 
  .columna5 {
    width: 50%;
    background-color: red;
  }
}
<!DOCTYPE html>
<html>
<head>
  <title>Responsive design</title>
  <link rel="stylesheet" type="text/css" href="theme2.css">
</head>
<body>
  <div class="container">
    <section class="columna1">Sección 1</section>
    <section class="columna2">Sección 2</section>
    <section class="columna3">Sección 3</section>
    <section class="columna4">Sección 4</section>
    <section class="columna5">Sección 5</section>
  </div>
</body>
</html>

2

2 respuestas 2

5

!Buenas!

El problema que tienes es esta parte de aquí:

width: 50%;

Aunque le introduzcas un 50%, no quiere decir que vaya a coger la mitad de la pantalla. Tienes que hacer bien los cálculos de las medidas...

He estado probando y si cambias el valor de 50% a un 47% se queda como quieres.

Te dejo el código:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  border: solid red 1px;
  width: 800px;
}

.columna1, 
.columna2, 
.columna3, 
.columna4, 
.columna5 {
  width: 100%;
  border: solid red 1px;
  margin: 10px;
  background-color: green;
}

@media (min-width: 600px) {
  .columna2,
  .columna3, 
  .columna4, 
  .columna5 {
    width: 47%;
    background-color: red;
  }
}
<!DOCTYPE html>
<html>
<head>
  <title>Responsive design</title>
  <link rel="stylesheet" type="text/css" href="prueba.css">
</head>
<body>
  <div class="container">
    <section class="columna1">Sección 1</section>
    <section class="columna2">Sección 2</section>
    <section class="columna3">Sección 3</section>
    <section class="columna4">Sección 4</section>
    <section class="columna5">Sección 5</section>
  </div>
</body>
</html>

Nota: He cambiado los nombres de los archivos .css y .html tenlo en cuenta.

8
  • Muchas gracias por tu respuesta, habia probado algo parecido tambien con medidas en px, y tambien funcionaba.
    – Pablo
    el 21 may. 2019 a las 20:12
  • Si te resolvió la duda, marca como respondida. Gracias :) el 21 may. 2019 a las 20:13
  • 4
    @Youshiro Aunque tu respuesta es correcta, no has explicado el porqué. El problema en sí no es que se aplique un 50%, el problema es que está usando valores en pixeles tanto en margin como en border, esto ocupa parte del espacio que debería contener el porcentaje. Una solución conservando siempre el 50% es eliminar el pixel en` border` y cambiar margin por padding el 21 may. 2019 a las 20:14
  • 1
    @Pablo te lo ha explicado en comentario Jheyman. Disculpa por mi breve descripción del problema. el 21 may. 2019 a las 20:16
  • 2
    Una buena respuesta. Observación: cuando utilizo flexbox con flex-direction:row no utilizo width sino flex Por ejemplo en lugar de width: 47%; habría utilizado flex:1 1 47%: ¿puede crecer? sí; ¿puede decrecer? sí; anchura: más o menos 47%
    – enxaneta
    el 22 may. 2019 a las 10:28
3

yo en lo personal lo haría de la siguiente manera:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  border: solid red 1px;
  width: 800px;
}

.r{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  background:yellow;
  flex:1;
}

.col-10, .col-5{
  border: solid red 1px;
  margin: 10px;
  background-color: green;
}
.col-10{
  flex:10;
}
.col-5{
  flex:5;
}
@media (min-width: 600px) {
  .r{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    background:yellow;
    flex:1;
  }
}
<!DOCTYPE html>
<html>
<head>
  <title>Responsive design</title>
  <link rel="stylesheet" type="text/css" href="prueba.css">
</head>
<body>
  <div class="container">
    <div class="r">
      <section class="col-10">Sección 1</section>
    </div>
    <div class="r">
      <section class="col-5">Sección 2</section>
      <section class="col-5">Sección 3</section>
    </div>
    <div class="r">
      <section class="col-5">Sección 4</section>
      <section class="col-5">Sección 5</section>
    </div>
  </div>
</body>
</html>

Con todo respeto el utilizar un width:X% le quita todo lo que es flexbox, pero esa es mi opinion el hacerlo con width es depende de cada uno.

en mi caso cambio la dirección del Main axis en el container, para poder acomodar a sus hijos de forma vertical y de igual forma para la clase r=row=fila, y en los elementos columna=col-x solo aplico el flex para declarar la relación entre elementos.

Al hacer la media query lo único que hago es declarar la clase r con el Main Axis por defecto.

aqui el codigo en codePen -> https://codepen.io/anon/pen/rgYbJe?editors=1100

1
  • Muchas gracias, lo adapte a mi código y funciona perfectamente :)
    – Pablo
    el 22 may. 2019 a las 23:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.