El alineamiento con Flexbox es una técnica potente y flexible que permite organizar y posicionar elementos dentro de un contenedor en CSS. En este método, se utilizan propiedades específicas como display: flex, justify-content, y align-items para alinear elementos de manera dinámica, ya sea horizontal o verticalmente, dentro del contenedor. Esta técnica es especialmente útil para crear diseños responsivos, ya que facilita el ajuste de elementos sin necesidad de aplicar cálculos complejos.
¿Cómo funcionan las propiedades principales de Flexbox?
¿Qué rol juega 'justify-content'?
La propiedad justify-content en Flexbox controla cómo se distribuyen los elementos a lo largo del eje principal de un contenedor. Dependiendo de los valores utilizados, los elementos pueden empezar, terminar, centrarse o distribuirse uniformemente. Algunos de los valores más usados incluyen:
flex-start: Los elementos se alinean al comienzo del contenedor.
flex-end: Los elementos se alinean al final del contenedor.
center: Los elementos se centran en el contenedor.
space-between: Se distribuyen con espacios iguales entre ellos.
space-around: Se distribuyen con espacio igual alrededor de cada ítem.
¿Qué hace 'align-items'?
align-items define cómo se alinean los elementos dentro del contenedor a lo largo del eje cruzado (por lo general el eje vertical). Trabaja en conjunto con justify-content para controlar la disposición de los elementos. Los valores comúnmente utilizados son:
flex-start: Los elementos se alinean al comienzo del eje cruzado.
flex-end: Los elementos se alinean al final del eje cruzado.
center: Los elementos se centran a lo largo del eje cruzado.
baseline: Los elementos se alinean en su línea base común.
stretch: Los elementos estiran para llenar el contenedor (valor por defecto para height).
¿Cómo implementar Flexbox en CSS?
Para incorporar Flexbox y alinear elementos, el proceso es sencillo y generalmente sigue estos pasos básicos:
Asignar display: flex al contenedor: Establece el contenedor como un "flex container", activando las propiedades flexibles para sus elementos hijos.
.contenedor{display: flex;}
Aplicar justify-content y align-items: Define cómo se alinean los elementos dentro del contenedor.
.contenedor{display: flex;justify-content: center;/* Centralizar elementos horizontalmente */align-items: flex-start;/* Alinear elementos al inicio verticalmente */}
Ajustes específicos por contenedor: Cada contenedor puede tener configuraciones únicas dependiendo de cómo desees distribuir los elementos.
Flexibilidad: Permite crear diseños dinámicos que se ajustan automáticamente a diferentes tamaños de pantallas.
Simplicidad: Reduce cálculos manuales al organizar elementos en el espacio disponible.
Compatibilidad: Soporta la mayoría de los navegadores modernos, facilitando un diseño más consistente en diferentes plataformas.
Versatilidad: Útil para diversos tipos de alineaciones tanto en aplicaciones simples como en interfaces más complejas.
Aprender y dominar Flexbox puede mejorar significativamente la capacidad de desarrollar interfaces web más elegantes y eficientes. ¡No dejes de practicar y explorar esta poderosa herramienta para enriquecer tu desempeño como diseñador o desarrollador!
No encontré cuál es la propiedad para meter las dos en una sola :c
.
Solo encontré una propiedad llamada place-content que engloba a justify-content y align-content en una sola propiedad, y lo mismo para place-items que engloba a justify-items y align-items en una sola propiedad, pero no encontré ninguna que englbe a justify-content y align-items en una sola propiedad... 🤔
Lo que hice yo fue dibujar las propiedades y sus valores en un papel, literal uno por uno. Y luego cada vez que estaba escribiendo código y no recordaba, veía mi dibujo que estaba pegado en la pared. Me sorprendí de la cantidad de veces que se utilizan. Además poco a poco van quedando grabadas en tu mente.
OJO con esa definicion! lo que decis es cierto siempre y cuando flex-direction sea igual a row, que es el valor por defecto. Sin embargo, a veces te sera de utilidad utilizar flex-direction: column (o column-reverse) y cuando esto sucede, el eje principal(por defecto X) y el secundario(por defecto Y) se invierten, entonces el principal sera el eje Y mientras que el secundario sera el eje X. Es decir, ahora justify-content ordenara a los elementos de manera vertical(nuevo eje principal) mientras que align-items de manera horizontal(nuevo eje secundario). Espero que se haya entendido jaja! :)
X2, a veces sentía que estaba mal porque los Youtubers que veía usaban las otras técnicas, o incluso algunos float; pero al parecer fue que aprendí de buenas prácticas desde temprano.
Entiendo que cada programador es libre de usar la técnica que mejor maneje, pero he escuchado a creadores de tutoriales y cursos decir que si se usa flex o grid es porque no se se sabe de CSS y se recurre al camino "más fácil" y que los que si saben de CSS usan position para posicionar los elementos.
Pero hay alguna implicación respecto al performance o accesibilidad al momento de utilizar uno u otro?
Es totalmente una frase que usan más por ego que porque de verdad sea así. Es como decir "los verdaderos humanos que sabemos cazar vamos a buscar nuestra comida en la selva en lugar de ir al supermercado". No tiene sentido, como programadores debemos ser productivos.
También hay que saber cuándo usar una herramienta u otra según la situación. Esto se aprende con la práctica.
Totalmente de acuerdo con lo que mencionan, a nuestro alcance tenemos diferentes herramientas, lo importante es aplicar los estandares y que esto se vea reflejado en el resultado de lo que queremos hacer.
Es porque @extend es parte de un preprocesador de CSS, (de SASS si no estoy mal), lo que hace es que te extiende(copia) los estilos de una clase, hacia otras clases.
Lo que puedes hacer, si no quieres usar SASS es ponerle la clase de los estilos a los elementos en html.
Este curso la verdad a mi en lo personal, es demasiado fácil. Es importante ver los cursos de HTML y CSS con el profe Diego de Granda. Y este será pan comido jaja!
Necesitas un preprocesador de CSS, el más popular es Sass. Te recomiendo tomar el Curso de Preprocesadores CSS donde te enseñan esa sintaxis y otros preprocesadores.
Encontré una forma de resolverlo utilizando una única declaración en cada container.
Como ya mencionaron, existe la propiedad place-content, que es un short-hand de las propiedades:
align-content (CSS-Tricks).
justify-content (CSS-Tricks).
Para que la propiedad align-content nos funcione como deseamos es necesario que los containers contengan la declaración: flex-wrap: wrap;. Esta lo que produce es que los elementos hijos de un flex-container puedan saltar a la siguiente línea o columna si su ancho o su alto excede el contenedor. Por defecto la propiedad flex-wrap tiene como valor no-wrap, lo cual impide ese "salto".
Documentación1: flex-wrap (CSS-Tricks)
Documentación2: flex-wrap (MDN)
Para que se cumpla la condición de que sea ++con una sola declaración++, se puede agregar el flex-wrap únicamente al selector .container, eso hará que todos los containers se vean afectados, ya que utilizan su regla por el @extend.
@extend es un "superpoder" que le da SASS a CSS, que permite transferir las reglas de un selector a otro/s. En este caso se podría hacer lo mismo con CSS puro, utilizando ++selectores de atributo++.
También dejo mi resolución en CodePen por si quieren revisarla. Espero les sirva :D
Para comenzar con Flexbox, necesita convertir su contenedor en un contenedor flexible . Esto es tan fácil como:
<#container {display: flex;}>
!gif Propiedad # 2: Dirección flexible
Un contenedor Flexbox tiene dos ejes: un eje principal y un eje transversal , que por defecto tienen este aspecto:
!gif
Hay una distinción importante que hacer aquí: flex-direction: column no alinea los cuadrados en el eje transversal en lugar del eje principal. Hace que el propio eje principal pase de horizontal a vertical.
También hay un par de otras opciones para flex-direction: row-reverse y column-reverse.
!gif
**Propiedad n. ° 3: justificar el contenido
**Justify-content controla cómo alinea los elementos en el eje principal.
Tiene cinco comandos a su disposición para usar justify-content :
Flex-start
Flex-end
Center
Space-between
Space-around
!gif Propiedad # 4: Alinear elementos
Alinear elementos será muy sencillo. Si justify-content funciona a lo largo del eje principal, align-items se aplica al eje transversal.
Las propirdades de alineación son:
flex-start
flex-end
center
stretch
baseline
!gif
Para demostrar mejor los ejes principal y transversal, combinemos justify-content y align-items y veamos cómo el centrado funciona de manera diferente para los dos comandos de dirección flexible:
!gif Propiedad # 5: Alinear uno mismo
Align-self le permite manipular manualmente la alineación de un elemento en particular.
Básicamente, anula los elementos de alineación de un cuadrado. Todas las propiedades son iguales, aunque el valor predeterminado es auto , en el que sigue los elementos de alineación del contenedor.
<#container { align-items: flex-start;}.square#one { align-self: center;}// Only this square will be centered.>
!gif
Encontré una forma de resolverlo utilizando una única declaración en cada container.
Como ya mencionaron en otros aportes de esta clase, existe la propiedad place-content, que es un short-hand de las propiedades:
align-content (CSS-Tricks).
justify-content (CSS-Tricks).
Esto sirve, pero teniendo en cuenta un detalle importante. Para que la propiedad align-content nos funcione como deseamos es necesario que los containers contengan la declaración: flex-wrap: wrap;. Esta lo que produce es que los elementos hijos de un flex-container puedan saltar a la siguiente línea o columna si su ancho o su alto excede el contenedor. Por defecto la propiedad flex-wrap tiene como valor no-wrap, lo cual impide ese "salto".
Documentación1: flex-wrap (CSS-Tricks)
Documentación2: flex-wrap (MDN)
Ahora bien, no se estaría cumpliendo la condición de que sea ++con una sola declaración++, solo estaríamos cambiando las propiedades align-items y justify-content por flex-wrap y place-content... Pero, se puede agregar la declaración del wrap únicamente al selector .container, eso hará que todos los containers se vean afectados, ya que utilizan su regla por el @extend.
@extend es un "superpoder" que le da SASS a CSS, que permite transferir las reglas de un selector a otro/s. En este caso se podría hacer lo mismo con CSS puro, utilizando ++selectores de atributo++.
