1

Éste es mi código:

.filadisco1 {
  display: flex;
  display: -webkit-flex; 
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  justify-content:space-around;
}

.discox {
  width: 250px;
  height: 420px;
  margin-bottom: 15px;
  display: flex;
  display: -webkit-flex;   
  flex-direction: column;     
  -webkit-flex-direction: column;  
  margin-top: 34px;
  /* margin-left: 50px;*/
  background-color: #212f31;
}
<div class="filadisco1"> 

  <div class="discox">
    <a class="ablanco" href="la-desvirtualizacion-de-las-ideas/">
      <img class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco5.jpg">
    </a>
    <p class="parrafodisco">La Desvirtualización de las ideas (2015)</p>
    <p class="parrafodescrip">	La idea sigue siendo la misma. Rock cannábico y kalimochero. La grabación [...]</p>				
  </div>

  <div class="discox">
    <a class="ablanco" href="bokerones-muertos/">
      <img class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco4.png">
    </a>
    <p class="parrafodisco">Bokerones muertos (2014)</p>
    <p class="parrafodescrip">	Este nuevo disco, musicalmente más tranquilo, es el tercero que hacemos juntos.[...]</p>				
  </div>

  <div class="discox">
    <a class="ablanco" href="la-democracia-ha-muerto-vol2/">
      <img class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco3.jpg">
    </a>
    <p class="parrafodisco">La democracia ha muerto vol 2 (2013)</p>
    <p class="parrafodescrip">Consta de siete temas de rock cannábico y kalimochero. Fernando de la Pola sigue [...]</p>				
  </div>

  <div class="discox">
    <a class="ablanco" href="la-democracia-ha-muerto-vol1/">
      <img class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco2.jpg">
    </a>
    <p class="parrafodisco">La democracia ha muerto vol 1 (2012)</p>
    <p class="parrafodescrip">	Ahora Fernando se junta con Dani, que ya había estado en Melilla en Jamón de Mono. Así surge [...]</p>				
  </div>

  <div class="discox">
    <a class="ablanco" href="se-busca-banda/">
      <img class="imgdiscosx" src="<?php bloginfo('template_url'); ?>/images/jamondisco1.jpg">
    </a>
    <p class="parrafodisco">Se busca banda (2010)</p>
    <p class="parrafodescrip">	Disco grabado durante el verano del 2009. Fernando decide proponerle el proyecto de producción de doce temas [...]</p>				
  </div>

</div> 

Tengo el contenedor padre y dentro 5 hijos; como son 5 hijos, los 2 de abajo en un width de 960px se ven centrados pero no están alineados con los 3 elementos de arriba.

Con justify-content:space-around; hago que tengan la misma separación entre los elementos y estos con el contenedor padre, pero los 2 de abajo se centran y rompen la consistencia. Los 2 hijos de abajo tendrían que estar debajo de los 2 primeros elementos de arriba.

¿Por qué ocurre esto?¿Qué puedo hacer para solucionarlo?

1 respuesta 1

1

Es el comportamiento natural para los valores center y space-around. Lo que deseas actualmente no puede hacerse de forma normal con flexbox. Sin embargo, como en todo, se pueden pensar y crear hacks para simular este comportamiento.

Hace ya un tiempo buscaba lo mismo porque quería el mismo comportamiento para una galería de productos y encontré una solución interesante.

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: .5rem;
}
.container .box {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  height: 200px;
  margin: 15px;
  width: 200px;
}
.container .box.green {
  background-color: #1abc9c;
}
.container .box.blue {
  background-color: #3498db;
}
.container .box.gold {
  background-color: #f1c40f;
}
.container .box.purple {
  background-color: #8e44ad;
}
.container .box.orange {
  background-color: #d35400;
}
.container .box.midnight {
  background-color: #34495e;
}
.container .box.red {
  background-color: #e74c3c;
}
.container .box.silver {
  background-color: #bdc3c7;
}

.filling {
  width: 200px;
  height: 0;
  margin: 15px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <main class="container">
    
    <div class="box green"></div>
    <div class="box blue"></div>
    <div class="box gold"></div>
    <div class="box orange"></div>
    <div class="box midnight"></div>
    <div class="box purple"></div>
    <div class="box red"></div>
    <div class="box silver"></div>
    <div class="filling"></div>
    <div class="filling"></div>
    <div class="filling"></div>
  </main>
</body>
</html>

El ancho de los divs de relleno deben de:

  • Tener el mismo ancho de los ítems
  • Tener el mismo margen de los ítems
  • No tener alto. Esto es importante.

Tu Respuesta

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

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