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-betweeno 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
17 Nuevos Cursos Gratuitos de SQL, Python, Diseño Web y Más (06 de Marzo)
Regreso con nuevos cursos gratis, recuerda que algunos de los cupones de los cursos publicados ayer, es muy posible que aún sigan activos; y vas a poder encontrar cursos en español de javascript -typescript, react,vue- y Unity. Además, de cursos en inglés de Python, R, SQL y más; también tienes muchos cursos totalmente gratis y una gran oferta de guías para programación de O´Reilly (en inglés) ¡SEGUIR LEYENDO!
21 Nuevos Cursos Gratuitos: Python, Google Cloud, CSS y Más (25 de Febrero 2021)
Como de costumbre, vamos con los cursos gratis, tenemos 3 cursos en español: Computación, Google Cloud y aplicaciones web; y 18 cursos gratuitos en inglés: Python, Flask, Ionic, PHP, Android, Github, CSS, Flexbox, Illustrator, Photoshop, Scrum y minado de Sugar. Recuerda, que puedes si quieres, puedes acceder a las Mejores Ofertas de Udemy ¡Alé, aprendamos gratis un ratico! Cursos en Español Computación ? Curso Gratuito de ¡SEGUIR LEYENDO!
40 Cursos Gratis de Udemy: Desarrollo Web, Python (cupón finalizado)
Recién llega la primavera y vamos con una publicación más, que incluye los cursos del Lunes; hoy tenemos, 9 cursos en español (Typescript, Javascript, React, Vue, Firebase, Swift, Azure, HTML y CSS, Power Bi). Más 31 cursos en inglés: Javascript, Typescript, React, Python, R, Java, Drupal, Android y Kotlin, Básicos de Visual Studio Code, Bootstrap, Gitlab, Maya 3D, Photoshop, Marketing en Facebook e Instagram, SEO. Iniciación ¡SEGUIR LEYENDO!
5 Extensiones de Chrome capaces de aumentar tu productividad como desarrollador
Como desarrollador de software, es importante poder aumentar la productividad para terminar las tareas más difíciles a su debido tiempo. Para optimizar los procesos, se requieren las mejores herramientas y tecnologías, entre ellas algunas de las mejores extensiones de Chrome. Aprender a programar es una de las tareas más difíciles y que consume más tiempo en los nuevos programadores. Una vez que hayas aprendido a programar ¡SEGUIR LEYENDO!
85 Geniales Recursos CSS Gratuitos
La lista de las siguientes geniales herramientas de CSS, se basa en el hilo de Twitter de @Prathkum. El listado se separa en herramientas de color, selectores de color integrados, fragmentos de código, documentos y notas, generadores de CSS, sitios de inspiración, repositorios de GitHub, validadores de CSS y más. ? Colección Recursos CSS / ? Cursos Gratis de CSS / ? Libros Gratis de CSS ¡SEGUIR LEYENDO!
¿Cómo alinear a la derecha en Bootstrap 4?
Bootstrap es un framework CSS que se utiliza para diseñar y personalizar sitios adaptables para dispositivos móviles. En Bootstrap 4, la alineación de elementos a la derecha se puede lograr usando cualquiera de las siguientes clases: Agregando la clase float-right La clase .float-right en Bootstrap usa la propiedad float CSS para colocar un elemento a la derecha. Debes tener en cuenta que el contenedor Bootstrap 4 ¡SEGUIR LEYENDO!