Flexbox
Quieres tres botones sentados en una fila, espaciados uniformemente, todos con la misma altura, y centrados verticalmente sin importar cuánto texto tenga cada uno. En los viejos tiempos esto significaba floats, clearfixes y mucha adivinanza. Flexbox es la herramienta construida para exactamente esto: le dices a un contenedor que distribuya sus hijos en una línea, y luego los ajustas en dos ejes hasta que se sienten donde quieres. La mayoría de los diseños cotidianos que ves en la web, barras de navegación, barras de herramientas, filas de tarjetas, tiene un contenedor flex debajo.
El contenedor flex
Flexbox comienza con una línea en un elemento padre. Establece display: flex en un contenedor y sus hijos directos se alinean en una fila, uno al lado del otro. Ese contenedor es ahora un contenedor flex, y cada hijo dentro de él se convierte en un elemento flex.
.nav {
display: flex; /* los hijos ahora se sientan en una fila */
}Los elementos se distribuyen en dos direcciones. El eje principal va de izquierda a derecha, la forma en que se alinean los elementos. El eje transversal va de arriba a abajo, a través de la fila. Dirigirás elementos a lo largo de ambos, así que ayuda visualizarlos ahora: el eje principal es la línea en la que se sientan los elementos, el eje transversal es la dirección a través de él.
.nav {
display: flex;
}Una única declaración, y los hijos de cualquier bloque dejan de apilarse de arriba a abajo y comienzan a sentarse en una fila. Todo lo demás en este capítulo trata sobre dirigir esos elementos una vez que están en el contenedor.
display: flex en un padre y sus hijos directos se alinean en una fila. Ese padre es el contenedor flex, los hijos son elementos flex. Los elementos se mueven en dos direcciones: el eje principal es la línea en la que se sientan, el eje transversal corre a través de él, y empujarás elementos a lo largo de ambos. Alineación a lo largo de los ejes
Una vez que tus elementos están en una fila, dos propiedades los mueven. justify-content espacía elementos a lo largo del eje principal, la dirección en la que se sientan. align-items los mueve a lo largo del eje transversal, arriba y abajo dentro de la fila.
.nav {
display: flex;
justify-content: space-between; /* empuja elementos aparte a lo largo de la fila */
align-items: center; /* alinéalos en el medio vertical */
}Los valores comunes para justify-content son flex-start (agrupados a la izquierda), center (agrupados en el medio), flex-end (agrupados a la derecha), space-between (espacios entre elementos, ninguno en los extremos), y space-around (espacios en ambos lados de cada elemento). Para align-items, center es el que más usas.
Para centrar algo en ambas formas, el movimiento que todos aprenden primero: establece ambos en center.
.hero {
display: flex;
justify-content: center; /* centrado a lo largo del eje principal */
align-items: center; /* centrado a lo largo del eje transversal */
}justify-content espacía elementos a lo largo del eje principal, align-items los mueve a lo largo del eje transversal. Los valores a recordar para el primero son center, space-between, y flex-start. Establece ambos en center y lo que sea que esté adentro se sienta justo en el medio, que es el movimiento de diseño que usarás una y otra vez. Dirección y ajuste
Por defecto, un contenedor flex distribuye elementos en una fila. Cambia eso con flex-direction. Establécela a column y los elementos se apilan de arriba a abajo en lugar de sentarse uno al lado del otro.
.sidebar {
display: flex;
flex-direction: column; /* los elementos ahora se apilan verticalmente */
}Cuando los elementos en una fila se quedan sin espacio, se aplastan cada vez más delgados. Para dejarlos caer en una nueva línea en lugar de eso, añade flex-wrap: wrap.
.card-row {
display: flex;
flex-wrap: wrap; /* los elementos que no caben se mueven a la siguiente línea */
}Para el espacio entre elementos, usa gap. Añade un espacio consistente entre cada elemento sin añadir espacio en los bordes exteriores.
.card-row {
display: flex;
gap: 16px; /* 16px entre cada elemento */
}flex-direction: column apila elementos verticalmente en lugar de en una fila. flex-wrap: wrap permite que los elementos caigan a una nueva línea cuando se quedan sin espacio, en lugar de ser aplastados. Y gap pone espacio uniforme entre elementos sin añadir ninguno en los bordes, así que alcánzalo antes que márgenes. Dimensionamiento flexible de elementos
El punto de flexbox es que los elementos pueden flexionarse, crecer o encoger para compartir el espacio. El atajo que usarás más es flex: 1 en un elemento, que le dice que crezca y tome una parte igual de cualquier espacio disponible.
.card {
flex: 1; /* cada tarjeta crece para llenar una parte igual de la fila */
}Pon flex: 1 en tres tarjetas en una fila y dividen el contenedor en tres anchos iguales. Dale a una tarjeta flex: 2 y toma el doble de espacio que las otras. Ese número único es cómo los elementos dividen el espacio restante entre ellos.
Detrás de flex: 1 hay tres controles separados: cuánto crece un elemento, cuánto se encoge, y su tamaño inicial. Raramente los estableces uno por uno al principio, el atajo cubre los casos comunes, pero ayuda saber que están ahí.
.layout {
display: flex;
gap: 24px;
}
.sidebar {
flex: 0 0 240px; /* 240px fijo, nunca crece o se encoge */
}
.main {
flex: 1; /* toma todo el espacio restante */
}Una barra lateral fija al lado de una columna principal flexible, tres líneas de intención. Este patrón, más la barra de navegación alineada de antes, cubre una gran parte de los diseños que construirás.
flex: 1 en un elemento le dice que crezca y tome una parte igual de la fila, así que tres tarjetas con flex: 1 salen con el mismo ancho. Sube una a flex: 2 y toma el doble del espacio. Ese número único es cómo los elementos flex dividen el espacio entre ellos.