Estoy tratando de crear un sistema de menús con una imagen y texto arriba y abajo. Los datos son dinámicos. Quiero que el sistema de menús aparezca de modo que cada imagen esté a la misma distancia entre sí para que se alineen en una cuadrícula de imágenes tanto horizontal como verticalmente.
El problema es el texto. Si el texto es más largo que la imagen, entonces el div se agranda. Sin embargo, entonces crea una brecha de aspecto incómodo ya que las imágenes ya no están equidistantes entre sí.
Para evitar esto, creo que el mejor enfoque sería que cada uno de los otros divs adoptara el tamaño del div más grande. Sin embargo, no estoy seguro de cómo hacer esto.
He intentado con flexbox usando la flex-wrappropiedad. Si bien se está ajustando bien, no he podido encontrar una manera de hacer que cada una de las imágenes se alinee a la misma distancia entre sí.
¿Cómo hago para lograr esto?
Mi código es el siguiente:
#outer {
display: flex;
}
#main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 20px;
}
.section {
background-color: #ddd;
padding: 15px;
}
.label, .icon {
text-align: center;
}<div id="outer">
<div id="main">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>PD. Tampoco estoy seguro de por qué mis divisiones de sección aumentan su altura. Por lo tanto, cualquier idea sobre esto también sería apreciada.
align-itemsestá configurada stretchde manera predeterminada. Puede cambiar eso fácilmente:align-items: flex-start;