Solo necesito poner dos cajas una al lado de la otra y escuché que flexbox es bueno en cosas así.
Solo agregando display: flex; al elemento padre coloca a los hijos en una fila.
Bueno, eso es genial. Supongo que podría haberlos hecho flotar, pero esto es más fácil.
Sin embargo, probablemente deberían ocupar todo el espacio que tienen. ¿Puedo estirar al padre al 100% de ancho? Bueno, puedo, pero aparentemente eso no afectará a los elementos secundarios.
Si el elemento padre tiene más espacio del que necesitan los niños, no hace nada para ayudar a los niños a llenar el espacio solos.
Tal vez pueda usar width: 50%; en los niños? Eso funciona, pero pensé que el punto de flexbox es que no tienes que ser muy específico sobre el ancho. Ah, sí, flexbox tiene todas estas formas de expresar el comportamiento inicial de crecimiento y encogimiento de los niños. Parece flex: 1; es tan fácil como aquí.
Aplicando flex: 1; a los niños les permite crecer y llenar el espacio.
Me gusta cómo no he tenido que hacer ningún valor matemático o de código duro hasta ahora. ¿Puedo convertirlo en un patrón de tres sin tocar CSS?
Bonito.
Hmmm, espera. El tamaño es un poco flexible. Nada obliga a estas cajas a ser un tercio del contenedor todo el tiempo.
Parece flex-basis: 33% no soluciona esto. flex: 0 0 33%; tampoco funciona. Parece width: 33%; flex-shrink: 0; sin embargo, si realmente queremos reforzarlo.
A veces, un diseño requiere cajas de exactamente el mismo tamaño. Este es quizás territorio CSS Grid, pero lo que sea.
La palabra larga que obliga a ese comportamiento de dimensionamiento en anchos estrechos es quizás un escenario poco común. También podríamos haberlo solucionado con word-break: break-word; hyphens: auto; en el niño.
Otra cosa que podríamos hacer es dejar que los elementos malditos se envuelvan en lugar de ser tan estrictos al respecto. Flexbox puede hacer eso, ¿verdad?
Oh, oye, eso me recuerda lo genial que es que esos dos primeros artículos tengan la misma altura. Eso es lo predeterminado stretch comportamiento, pero también se puede controlar. Y es por fila, por lo que la segunda fila tiene su propia altura diferente.
¿Qué pasa si quiero que ese primer bloque de “Amor” esté en la parte superior en su lugar? Parece que puedo volver a pedirlo, ¿eh? Veamos, el orden predeterminado es 0, así que para ser el primero, lo hago order: -1;.
¡Decir ah! Eso funcionó un poco. Pero quise decir que quiero que ocupe todo el ancho en la fila superior. Supongo que puedo patearlo hasta flex-basis: 100%; y los demás se envolverán en consecuencia.
Es bastante extraño tener el orden de la fuente y el orden visual diferentes de esta manera. Quizás eso debería ir en la categoría de “nunca hagas esto”.
¿Qué pasa si quiero renunciar a todo el asunto de Flexbox en un momento determinado? Una parte de mí quiere cambiar la dirección para ir verticalmente flex-direction: column; y obligar a los niños a tener el ancho completo. Ah, un simple display: block; en el padre hace eso de una sola vez.
En lugar de cambiar todas las cosas de flexbox para manejar un diseño de columna, simplemente desactivamos flexbox.
¡Flexbox puede hacer muchas más cosas! Uno de mis favoritos es cómo funcionan los márgenes automáticos para “empujar” otros elementos cuando hay espacio. Este es solo un pequeño viaje jugando con alguna interfaz de usuario y viendo las cosas útiles que hace flexible junto con las cosas que pueden hacer que sea confuso.