Si adoras trabajar con Flexbox, probablemente hayan encontrado en el pasado el problema de los elementos en la última fila que no se comportan del todo bien. Lo que significa que no tienen una alineación a la izquierda.
Bueno, hay una manera muy simple de tener una alineación izquierda perfecta con una propiedad html simple: aria-hidden
Esta propiedad indicará que tanto el elemento como sus hijos no serán visibles ni perceptibles por el usuario o el lector. Para obtener más información, puede visitar el sitio web de W3.
Aquí tienes un html simple para crear unos cuadrados azules con los que practicar:
<div class="container">
<div class="containerItem"></div>
<div class="containerItem"></div>
<div class="containerItem"></div>
<div class="containerItem"></div>
<div class="containerItem"></div>
<div class="containerItem"></div>
<!-- marca aquí <i aria-hidden="true"></i> para convertirlos en una columna -->
<i aria-hidden="true"></i>
<i aria-hidden="true"></i>
<i aria-hidden="true"></i>
</div>
En el código anterior, tienes 6 divisiones vacías para crear los cuadrados y debajo 3 divisiones con la etiqueta
<i>
adjunto de la propiedad aria-hidden establecida en verdadero / true.
Estas etiquetas
<i>
corresponden a los elementos cuadrados que podrías necesitar colocar para completar la última fila.
Necesitas tantas etiquetas
<i>
como lugares haya en la fila, menos uno. Necesitarás algo como así:
.container {
display: flex;
flex-idrection: row;
flex-wrap: wrap;
margin: 0 30px;
justify-content: center;
&Item {
display: block;
background-color: #blue;
border-radius: 10px;
width: 250px;
height: 250px;
margin: 20px;
}
i {
width: 250px;
height: 250px;
margin: 20px;
}
}
En este código se da al contenedor de las filas diferentes propiedades de Flexbox, incluidas
justify-content: center
. Pero este truco funciona con otros valores como
space-between
o
space-around
.
Lo importante aquí es que debes dar a tus etiquetas
<i>
el mismo ancho, alto y márgene que a tus etiquetas articles.
Relacionado
Zona de pruebas y prácticas de Tailwind CSS Un campo de juego en línea avanzado para Tailwind CSS, que incluye soporte para cosas como: Personalización de tu archivo tailwind.config.js Extraer clases con @apply Finalización de código con vista previa instantánea Perfecto para aprender cómo funciona el framework de Tailwind CSS y crear un prototipo de una nueva idea o crear una demostración para compartir en línea. PROBAR EL PLAYGROUND DE TAILWIND CSS PLAY
The best Udemy courses in August, only for 9.99 $ Los mejores cursos en inglés y en oferta, hasta el día 27. Los cursos incluidos aquí son todos en inglés. Revisa por aquí, entre los mejores cursos en oferta de Udemy de Agosto en español, si lo que deseas son cursos en español. Si por desgracia, no tienes la oportunidad de acceder a comprar alguno de los excelentes cursos que te mostraré a continuación. Siempre puedes ¡SEGUIR LEYENDO!
Palabras más usadas en cada lenguaje de programación Nube de palabras más usadas dentro de los lenguajes de programación Javascript, React, CSS, HTML, Java, Python, Lua, PHP, Ruby, C+, Perl, C#, Scala, Go, SQL, Rust, Lisp, Clojure, Kotlin, CMake, Swift, Haskel, Elixir, Objective C, F#, Elm, PureScript, Pascal, R, Erlang, VimL, Groovy. Los datos han sido extraídos de los diferentes repositorios de Github. Nube de Palabras de Javascript Insertar Javascript ⛓ Conocer Palabras Nube ¡SEGUIR LEYENDO!
Nunca ha existido un mejor momento para crear sitios web Este artículo es una traducción completa de There’s never been a better time to build websites del blog de SimeonGriggs Mi historia del origen del desarrollo web se remonta a hace unos 25 años. En ese entonces pasé mis semanas jugando Red Alert, hasta el fin de semana cuando pude reservar 30 minutos de acceso a Internet en mi biblioteca local. Andaría en bicicleta tomando un ¡SEGUIR LEYENDO!
Mejores Proyectos de Github para Desarrolladores Web por Iain Freestone (Julio) En estos recopilatorios, voy a publicar los mejores proyectos de Github enfocados al desarrollo web y que son tendencia en los últimos días. Los agradecimientos de estos recopilatorios, puedes dejárselos a Ian Freestone que es el encargado de hacer tanto y tan buen trabajo, ¡Gracias por tanto Ian! ??? Además puedes suscribirte a su lista de correos semanal, seguirle a través de su página web (https://iainfreestone.com/) ¡SEGUIR LEYENDO!