Los atributos de estilos
justify-content
y
align-items
solo se pueden usar cuando la visualización de un elemento se establece en
flex
,
grid
o algunos otros valores.
CSS Flex property
es una propiedad ampliamente adoptada y utilizada por los desarrolladores front-end en la actualidad. Casi no puedes prescindir de él.
Su asociado es el
CSS Grid Property
que se usa más veces al lado.
Personalmente, uso
flex
hasta el punto de que si
flex
fuera humano, probablemente ya estaría maldito.
Justify-content y align-items
Este artículo está escrito con la intención de asegurar el uso efectivo de las dos propiedades en el título (particularmente en el primer intento), por lo tanto, se requiere un conocimiento previo
CSS Flex
. Lee sobre CSS Flex aquí.
justify-content
y
align-items
solo se puede usar cuando la visualización de un elemento se establece en
flex
,
grid
o algunos otros valores.
Estarías usando la pantalla de flex
Usar estas dos propiedades puede ser confuso ya que es difícil saber cuándo usar cuál uno u otra.
Como dije, requiere el valor de visualización flexible (display: flex;)
....
element {
display: flex;
}
....
Atributos de flex:
element {
display: flex;
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly;
align-items: flex-start|flex-end|center|stretch|baseline;
}
Cuando la visualización de un elemento se configura como flexible, la dirección predeterminada es ‘fila’. También se puede configurar para remar manualmente.
element {
display: flex;
flex-direction: row;
}
Cuando
justify-content
se usa en un flujo horizontal, alinea los elementos a lo largo de la dirección horizontal.
Flex-start: Alinea a la izquierda por defecto.
Flex-end: Alinea a la derecha de la pantalla.
Center: Contenido al centro.
Space-between: Espacia los elementos entre todo el ancho de la pantalla.
Space-around: Espacia los elementos en toda la pantalla, aplicando además un espaciado por ambos laterales de los elementos.
Cuando
align-items
se usa en un flujo horizontal, alinea los elementos a lo largo de la dirección vertical.
Flex-start: Alinea todo en una columna en la parte superior del espacio.
Flex-end: Alinea todo en una columna en la parte inferior del espacio.
Center: Alinea todo al centro de la pantalla, tanto desde arriba como desde abajo.
Baseline: Alinea todo en la parte superior de la caja, pero sin alinear los elementos.
Stretch: Alinea el contenido en columnas diferentes.
Puedes obtener más información sobre los valores de las propiedades flexibles asociadas (como
flex-start
,
flex-end
).
cuando un elemento
flex direction
se establece en
column
, el flujo cambia.
Posee otro flujo al que me referiría como el
vertical flow
Cuando
justify-content
se usa en un flujo vertical, alinea los elementos al revés, a lo largo de la dirección vertical. Por lo tanto, todos los valores establecidos para él solo funcionarán en esta dirección.
Cuando
align-items
se usa en un flujo vertical, alinea los elementos a lo largo de la dirección horizontal. Por lo tanto, todos los valores establecidos para él solo funcionarán en esta dirección.
Las dos propiedades simplemente cambiaron de trabajo cuando se cambió la dirección.
El secreto es simple.
EL
justify-content
FUNCIONA CON EL FLUJO Y
align-items
SIMPLEMENTE HACE LO CONTRARIO.
flex-direction: row`- `HORIZONTAL flow`- `HORIZONTAL direction`para `justify-content`- `VERTICAL direction`para`align-items
flex-direction: column`- `VERTICAL flow`- `VERTICAL direction`para `justify-content`- `HORIZONTAL direction`para`align-items
Si quieres centrar cualquier elemento en otro elemento. Simplemente haz esto:
.parent-element {
display: flex;
justify-content: center;
align-items: center;
}
Con esta configuración simple, todos los elementos de la clase
.parent-element
se centrarán vertical y horizontalmente.
Espera que a estas alturas puedas decidir fácilmente entre – y cómo usarlo de manera efectiva –
justify-content
&
align-items
?
Recurso útil: alineación de elementos en un contenedor flexible
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!
All Animation: Repositorio NPM de animaciones CSS All Animation.css es un conjunto de animaciones css agradables y locas creadas con el propósito de darle vida e interacciones a su proyecto. Son animaciones de navegador que le pueden dar más énfasis a tus páginas, como controles deslizantes y efectos 3D. No dudes en ojearlo si necesitas alguna idea desde la que generar tus mejores efectos desde CSS. VISITAR ALL ANIMATION 20 Recursos para desarrolladores ¡SEGUIR LEYENDO!
Mejores Libros PDF de Programación y Tecnología GRATIS Los Mejores Libros PDF Gratuitos de Informática. EL sitio perfecto para aprender a programar desde cero para principiantes con las mejores guías gratis. Esta es la mejor lista de libros de programación en PDF en español del mundo. Una completa biblioteca recopilada de cientos y cientos de libros en PDF que no encontrarás en ninguna parte más. Aquí, vas a encontrar libros enfocados hacía programadores. Sobre ¡SEGUIR LEYENDO!
Lanzado Bootstrap 5: Una nueva versión estable del framework CSS ¡Bootstrap 5 ha sido lanzado oficialmente! Después de tres versiones alpha, tres betas y varios meses de arduo trabajo. Conjunto a varios lanzamientos de los iconos de bootstrap. El equipo de Bootstrap ha lanzado definitivamente la versión estable de Bootstrap 5. Documentación Actualizada de Bootstrap 5 Sigue leyendo para conocer los detalles sobre las nuevas novedades en la versión de Bootstrap 5. Nuevo logotipo de Bootstrap ¡SEGUIR LEYENDO!