Estoy tratando de cambiar mis íconos para que se flexionen, pero eso no funcionó. Este fue mi código CSS original:
.recipe-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; text-align: center; }También intenté configurar la pantalla para flexionar, justificar el contenido para centrar y todo eso, pero tampoco funcionó. ¿Cómo puedo arreglar esto? Este es mi código html para mis iconos:
div class="recipe-icons"> <article> <!-- single recipe icon --> <i class="fas fa-clock"></i> <h5>prep time</h5> <p>30 min.</p> <!-- single recipe icon --> <i class="far fa-clock"></i> <h5>cook time</h5> <p>15 min.</p> <!-- single recipe icon --> <i class="fas fa-user-friends"></i> <h5>servings</h5> <p>6 servings</p> <!-- recipe tags --> <div class="recipe-tags"> Tags: <a href="tag-template.html">beef</a> <a href="tag-template.html">breakfast</a> <a href="tag-template.html">pancakes</a> <a href="tag-template.html">food</a> </div> </article> </div>Tengo una forma alternativa de hacer algo así usando display: flex; También debes rodear los elementos en un div para agruparlos. Ejemplo de trabajo https://jsfiddle.net/r5Lfcbh8/1/
HTML:
<article> <div class="recipe-icons"> <div class="iconRow"> <i class="fas fa-clock"></i> <h5>prep time</h5> <p>30 min.</p> </div> <div class="iconRow"> <i class="far fa-clock"></i> <h5>cook time</h5> <p>15 min.</p> </div> <div class="iconRow"> <i class="fas fa-user-friends"></i> <h5>servings</h5> <p>6 servings</p> </div> </div> <div class="recipe-tags"> <span>Tags:</span> <a href="tag-template.html">beef</a> <a href="tag-template.html">breakfast</a> <a href="tag-template.html">pancakes</a> <a href="tag-template.html">food</a> </div> </article>Y CSS:
article, .recipe-icons, .recipe-tags { display: flex; } article { flex-direction: column; } .recipe-tags { margin-top: 10px; } .recipe-tags > * { margin-left: 5px; } .recipe-icons > .iconRow { flex: 1 1 auto; text-align: center; } .recipe-icons > .iconRow > * { margin: 5px 0; }