Home / Questions / 25807
Accepted
Rafael Hernández
Asked: 2020-10-02 23:14:18 +0800 CST 2020-10-02 23:14:18 +0800 CST

Error layout with flexbox

  • 772

This is my code:

.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>

I have the parent container and 5 children inside; Since there are 5 children, the bottom 2 at a width of 960px look centered but are not aligned with the top 3 elements.

With justify-content:space-around;I make them have the same separation between the elements and these with the parent container, but the 2 below are centered and break the consistency. The bottom 2 children would have to be below the first 2 top elements.

Why is this happening? What can I do to fix it?

html5

1 Answers

  1. Best Answer

    This is the natural behavior for the values center​​and space-around. What you want currently cannot be done in the normal way with flexbox. However, as with everything, hacks can be thought of and created to simulate this behavior.

    Some time ago I was looking for the same thing because I wanted the same behavior for a product gallery and I found an interesting solution.

    .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>

    The width of the padding divs must be:

    • Have the same width of the items
    • Have the same margin of the items
    • Not having high This is important.
    • 1