Equilibrio sobre un pivote con Flexbox

Permítanme mostrarles una forma que descubrí recientemente para centrar un montón de elementos alrededor de lo que yo llamo pivote . Le prometo que el HTML moderno está fuera de discusión y que no necesitará conocer ningún CSS de última generación para realizar el trabajo.

Me gustan mucho los juegos de palabras, así que recientemente reimaginé el menú principal de mi sitio web como un guiño a los crucigramas, con mi nombre como palabra vertical y las secciones principales de mi sitio web en horizontal.

Así es como se ve el diseño con los nombres de algunos colores:

Y aquí hay una muestra del HTML que impulsa este rompecabezas:

div  div    spani/span    spann/span    spand/span    spani/span    spang/span    spano/span  /div  !-- MORE WORDS --/div 

En este ejemplo, la letra ges el pivote. ¿Ves cómo no está en la mitad del camino? Esa es la belleza de este desafío.

Podríamos aplicar un desplazamiento a cada palabra usando CSS codificado o propiedades personalizadas en línea y marcharnos. Ciertamente recibe un premio por ser la forma más obvia de resolver el problema, pero hay una desventaja: además de la .pivotclase, tendríamos que especificar un desplazamiento para cada palabra. La voz en mi cabeza me dice que eso agrega redundancia innecesaria, es menos flexible y requiere un equipaje adicional que no necesitamos cada vez que agregamos o cambiamos una palabra.

En lugar de eso, demos un paso atrás y veamos cómo se ve el rompecabezas sin ningún equilibrio:

Imaginemos por un momento que utilizamos display: nonepara ocultar todas las letras antes del pivote; ahora todo lo que podemos ver son los pivotes y todo lo que sigue a ellos:

Sin más cambios, nuestros pivotes ya estarían alineados. Pero hemos perdido el comienzo de nuestras palabras, y cuando reintroducimos las partes ocultas, cada palabra se desplaza hacia la derecha y todo vuelve a estar fuera de control.

Si en su lugar ocultáramos las letras finales, todavía nos quedarían pivotes desalineados:

Todo este ir y venir parece un poco inútil, pero revela una simetría en mi problema. Si usáramos un esquema de lectura de derecha a izquierda (RTL), tendríamos el problema opuesto: podríamos resolver el lado derecho pero el izquierdo estaría completamente equivocado.

¿No sería fantástico si hubiera una manera de que ambos lados se alinearan al mismo tiempo?

De hecho, lo hay.

Dado que ya tenemos media solución, tomemos prestado un concepto de algorítmica llamado divide y vencerás. La idea general es que podemos dividir un problema en partes y que, al encontrar una solución para las partes, encontraremos una solución para el todo.

En ese caso, dividamos nuestro problema en el posicionamiento de dos partes. Primero está la “cabeza” o todo lo que está antes del pivote.

Lo siguiente es la “cola”, que es el pivote más todo lo que sigue.

El flextipo de visualización nos ayudará aquí; Si no está familiarizado con él, flexes un marco para posicionar elementos en una dimensión. El truco aquí consiste en aprovechar los extremos izquierdo y derecho de nuestro contenedor para imponer la alineación. Para que funcione, intercambiaremos las partes de la cabeza y la cola usando un ordervalor de propiedad menor en la cola que en la cabeza. Flex utiliza la propiedad de orden para determinar la secuencia de elementos en un diseño flexible. Los números más pequeños se colocan al principio del flujo.

Para distinguir los elementos head y tail sin ningún HTML adicional, podemos aplicar estilos a la parte head de todas las letras, después de lo cual usaremos la naturaleza en cascada de CSS para anular el pivote y todo lo que sigue usando el subsiguiente -selector de hermanos .pivot ~ .letter.

Así es como se ven las cosas ahora:

Bien, ahora la cabeza está apoyada contra el extremo de la cola. ¡Espera, no hagas escándalo por eso! Podemos solucionar este problema aplicando margin: autoa la derecha del último elemento de la cola. Resulta que también es la última letra de la palabra que ahora se encuentra en algún lugar en el medio. La adición de un margen automático sirve para alejar la cabeza de la cola y llevarla hasta el lado derecho de nuestro contenedor.

Ahora tenemos algo que se parece a esto:

Lo único que queda es volver a unir nuestras piezas en el orden correcto. Esto es bastante fácil de hacer si aplicamos position: relativetodas nuestras letras y luego colocamos una left: 50%en la cola y una right: 50%en la cabeza.

Aquí hay una versión generalizada del código que acabamos de usar. Como puedes ver, son solo 15 líneas de CSS simple:

.container {  display: flex;}.item:last-child {  margin-right: auto;}.item {  order: 2;  position: relative;  right: 50%;}.pivot, .pivot ~ .item {  order: 1;  left: 50%;}

También es factible utilizar este enfoque para diseños verticales estableciendo flex-directionun columnvalor. También se debe decir que se puede lograr lo mismo pegando los elementos head y tail en sus propios envoltorios, pero eso requeriría más marcado y CSS detallado y, al mismo tiempo, sería mucho menos flexible. ¿Qué pasa si, por ejemplo, nuestro back-end ya está generando una lista desenvuelta de elementos con clases generadas dinámicamente?

Por casualidad, esta solución también funciona bien con los lectores de pantalla. Aunque estamos ordenando las dos secciones al revés, luego las volvemos a colocar en su lugar mediante un posicionamiento relativo, de modo que el orden final de los elementos coincida con nuestro marcado, aunque esté bien centrado.

Aquí está el ejemplo final en CodePen:

Conclusión

Los desarrolladores tienen mejores equilibrios que los acróbatas. ¿No me crees? Piénselo: muchos de los desafíos comunes que enfrentamos requieren encontrar un punto óptimo entre requisitos en competencia que van desde el rendimiento y la legibilidad hasta el estilo y la función, e incluso la escalabilidad y la simplicidad. Un acto de equilibrio, sin duda.

Pero el punto en el que encontramos el equilibrio no siempre es el punto medio entre una cosa y otra. El equilibrio a menudo se encuentra en algún punto intermedio inexplicable; o, como acabamos de ver, alrededor de un elemento HTML arbitrario.

¡Ahí lo tienes! Ve y diles a tus amigos que eres el mejor acróbata que existe.