Entendiendo Flexbox: todo lo que necesita saber

Este artículo cubrirá todos los conceptos fundamentales que necesita para mejorar con el modelo CSS Flexbox. Es largo, así que espero que estés listo para ello.

Si prefiere leer el tutorial completo en un solo documento .pdf, aquí está el enlace de descarga, sin condiciones, y si desea una experiencia más inmersiva, use el curso interactivo, es gratis. Sin ataduras.

Una nota sobre la curva de aprendizaje de Flexbox

Aquí hay un tweet de Philip Roberts, un desarrollador a quien respeto mucho:

Aprender Flexbox puede no ser divertido al principio. Desafiará lo que sabes sobre diseños en CSS. Pero eso está bien. Todo lo que vale la pena aprender comienza de esa manera.

Flexbox es ciertamente algo que debes tomar en serio. Allana el camino para el estilo moderno de diseño de contenido, y no desaparecerá pronto. Se ha convertido en un nuevo estándar. Entonces, con los brazos extendidos, ¡abrázalo!

Lo que aprenderás

Primero te guiaré por los conceptos básicos de Flexbox. Creo que cualquier intento de comprender Flexbox debe comenzar aquí.

Fundamentos de Flexbox

Aprender los fundamentos es genial. Lo que es aún mejor es aplicar estos fundamentos para crear aplicaciones del mundo real.

Te guiaré a través de la construcción de muchas "cosas pequeñas". Luego, terminaré las cosas con esta aplicación de música completamente diseñada con Flexbox.

Diseño de la aplicación de música

¿No se ve bonito?

Entraré en el funcionamiento interno de Flexbox mientras aprendes a construir el diseño de la aplicación de música. También obtendrá una idea del papel que desempeña Flexbox en el diseño web receptivo.

Estoy emocionado de mostrarte todo esto.

GIF por Jona Dinges

Pero antes de comenzar a construir interfaces de usuario, primero lo guiaré a través de algunos ejercicios. Esto puede parecer aburrido, pero todo es parte del proceso para que seas experto en Flexbox.

Empecemos.

Introducción

CSS ha evolucionado mucho en los últimos años. A los diseñadores les encantó la introducción de filtros, transiciones y transformaciones. Pero faltaba algo. Algo que todos anhelamos.

La creación de diseños de página inteligentes con CSS parecía haber persistido durante demasiado tiempo, y esto hizo que muchos de nosotros escribiéramos CSS extravagantes.

Siempre tuvimos que lidiar con carrozas, hacks de exhibición de mesas y las consecuencias que trajeron. Si ha escrito CSS durante algún tiempo, probablemente pueda relacionarse con esto. Y si no, ¡bienvenido a un mundo mejor!

Parece que nuestras oraciones como diseñadores y desarrolladores front-end finalmente se han escuchado. Esta vez, en gran estilo.

Ahora todos podemos deshacernos de esos trucos CSS hacky. No más uso incesante de flotadores, pantallas de celdas de tabla.

Es hora de adoptar una sintaxis moderna más limpia para crear diseños inteligentes. Bienvenido al modelo CSS Flexbox.

¿Qué es flexbox?

De acuerdo con la especificación, el modelo Flexbox proporciona una forma eficiente de diseñar, alinear y distribuir espacio entre elementos dentro de su documento, incluso cuando la ventana gráfica y el tamaño de sus elementos es dinámico o desconocido.

Si eso suena demasiado formal, entiendo el sentimiento. En un momento, explicaré lo que eso significa en inglés simple.

Ya sea que escriba CSS en sus sueños, o que recién esté comenzando, se sentirá como en casa.

¿Cómo empiezo a usar el modelo Flexbox?

Esta es la primera pregunta que todos hacen, y la respuesta es mucho más simple de lo que esperabas.

Para comenzar a usar el modelo Flexbox, todo lo que necesita hacer es definir primero un contenedor flexible.

En HTML normal, diseñar una lista simple de elementos toma esta forma:

      
  •   
  •   

Si echó un vistazo a eso, debe haber visto que la lista desordenada (ul) contiene los elementos de la lista (li).

Llamaría a ul el elemento padre y a li el elemento hijo.

Para usar el modelo Flexbox, debe hacer que un elemento padre sea un contenedor flexible (también conocido como contenedor flexible).

Para ello, configure display: flex o display: inline-flex para la variación en línea. Es así de simple, y desde allí está todo listo para usar el modelo Flexbox.

Lo que realmente sucede es que se inicia inmediatamente un contexto de formato Flexbox.

Te dije que no era tan difícil como esperabas.

Usando una lista desordenada y un montón de elementos de la lista, a continuación se muestra cómo se inicia un contexto de formato Flexbox.

/ * Convertir el elemento padre en un contenedor flexible * /
ul {
  pantalla: flex; / * o inline-flex * /
}

Dale un poco de estilo a los elementos de la lista, para que puedas ver lo que sucede aquí.

li {
  ancho: 100px;
  altura: 100 px;
  color de fondo: # 8cacea;
  margen: 8px;
}

Esto es lo que debes tener:

Flexbox activado

Puede que no lo hayas notado, pero algo ya ha sucedido. El contexto de formato de Flexbox ahora se inicia.

Recuerde que los elementos "li" son elementos de bloque por naturaleza, lo que significa que se apilan verticalmente, y esto se aplica a otros elementos de bloque CSS, como "div".

Visualización predeterminada para

La imagen de arriba es el resultado que puede haber esperado.

Sin embargo, con la inclusión de esa línea simple, display: flex, puede ver inmediatamente un cambio en el diseño.

Los elementos de la lista ahora se apilan horizontalmente, de izquierda a derecha. Como lo harían si usaras flotador.

Flexbox habilitado

El modelo Flexbox se activa tan pronto como introduce la "pantalla flexible" en cualquier elemento principal.

Es posible que no entienda por qué se produjo ese cambio en la orientación de los elementos de la lista. Prometo que entraré en el funcionamiento interno de eso muy pronto. Por ahora, la confianza ciega sería suficiente.

Entendiendo que la inclusión de la "pantalla flexible" comienza con el modelo Flexbox.

Hay una cosa más a la que debo llamar su atención.

Tan pronto como establezca la propiedad de visualización en flex, la lista desordenada se convierte automáticamente en el contenedor flex y los elementos secundarios (en este caso, los elementos de lista li) se convierten en elementos flex.

Estos términos aparecerían una y otra vez a medida que lo guíe a través de algunas cosas más interesantes que el modelo Flexbox tiene en su lugar.

He usado dos palabras clave y me gustaría poner más énfasis en ellas. Son vitales para comprender lo que se avecina.

  1. Contenedor flexible: el elemento principal que configuró para mostrar: flexión activada.
  2. Artículos Flex: los elementos secundarios dentro de un contenedor Flex.

Esta es la base para usar el modelo Flexbox.

Las propiedades del contenedor flexible

Dirección flexible || Flex-wrap || Flujo flexible || Justificar contenido || Alinear elementos || Alinear contenido

En la sección anterior, establecí algunos principios fundamentales. Qué son los contenedores flexibles y los artículos flexibles, y cómo iniciar el modelo Flexbox.

Ahora es un buen momento para aprovechar todo eso.

Habiendo establecido un elemento padre como contenedor flexible, se ponen a disposición un par de propiedades de alineación para usar en el contenedor flexible.

Al igual que definiría la propiedad de ancho en un elemento de bloque como ancho: 200 px, hay 6 propiedades diferentes que el contenedor flexible puede tomar.

La buena noticia es que la definición de estas propiedades no requiere un enfoque diferente al que ya está acostumbrado.

1. Dirección flexible

La propiedad Flex-direction controla la dirección en la que los elementos flexibles se colocan a lo largo del eje principal.

Puede tomar cualquiera de los cuatro valores.

/ * donde ul representa un contenedor flexible * /
ul {
  dirección flexible: fila || columna || fila inversa || columna inversa;
  }

En términos simples, la propiedad de dirección flexible le permite decidir cómo se distribuyen los elementos flexibles. Ya sea horizontal, vertical o invertido en ambas direcciones.

Técnicamente, "horizontal" y "vertical" no es lo que se llaman las direcciones en el "mundo flexible".

Estos se describen como eje principal y eje transversal. Los valores predeterminados se muestran a continuación.

En términos simples, la dirección predeterminada del eje principal se siente como "horizontal". De izquierda a derecha.

El eje transversal se siente como "vertical". De arriba a abajo.

De forma predeterminada, la propiedad de dirección de flexión se establece en fila y alinea los elementos de flexión a lo largo del eje principal. Esto explica lo que sucedió con la lista desordenada al comienzo de este artículo.

Aunque la propiedad de dirección flexible no se estableció explícitamente, tomó el valor predeterminado de fila.

Luego, los elementos flexibles se colocaron sobre el eje principal, apilándose horizontalmente de izquierda a derecha.

elementos flexibles apilados en el eje principal

Si la propiedad de dirección flexible se cambia a columna, los elementos flexibles se alinearán a lo largo del eje transversal.

Se apilarían de arriba a abajo, ya no de izquierda a derecha.

elementos flexibles apilados en el eje transversal

2. Flex-wrap

La propiedad flex-wrap puede adoptar cualquiera de los tres valores:

// donde ul representa un contenedor flexible
ul {
  flex-wrap: wrap || nowrap || envoltura inversa;
  }

Explicaré cómo funciona la propiedad de envoltura flexible al mostrarle un ejemplo.

Intente pegar muchos más elementos de la lista en la lista desordenada.

¿Qué piensas? ¿El contenedor flexible cambiará de tamaño para acomodar más, o dividirá los elementos de la lista en otra línea?

/ * agregando 3 elementos li más * /
      
  •   
  •   
  •   
  •   
  •   

Afortunadamente, el contenedor flexible se adapta para acomodar los nuevos artículos flexibles

3 elementos flex más agregados a la lista desordenada

Ve un poco más allá.

Agregue una cantidad ridícula de elementos flexibles al elemento padre. Haz un total de 10 artículos.

¿Lo que pasa?

Después de agregar aún más elementos de lista

Una vez más, el contenedor flexible se adapta para adaptarse a todos los niños, incluso si el navegador necesita desplazarse horizontalmente.

Este es el comportamiento predeterminado de cada contenedor flexible. Un contenedor flexible seguirá acomodando más artículos flexibles en una sola línea.

Esto se debe a que la propiedad flex-wrap por defecto es nowrap. Esto hace que el contenedor flexible NO se enrolle.

ul {
    flex-wrap: nowrap;
    / * Siga tomando más artículos flexibles sin romperse (envolver) * /
}

El no-wrap no es un valor revestido de hierro. Se puede cambiar

Con esa cantidad de elementos flexibles, sin duda desea que los elementos flexibles se "envuelvan" dentro del contenedor flexible.

"Ajustar" es una palabra elegante para decir, "cuando el espacio disponible dentro del contenedor flexible ya no puede albergar los elementos flexibles en sus anchos predeterminados, se divide en varias líneas.

Esto es posible con el valor de envoltura.

ul {
    flex-wrap: envoltura;
}

Con esto, los elementos flexibles ahora se dividen en varias líneas cuando es necesario.

En este caso, cuando una sola línea ya no puede contener todos los elementos de la lista en su ancho predeterminado, se dividen en varias líneas. Incluso al cambiar el tamaño del navegador.

Así es como se ve.

Tenga en cuenta que los elementos flexibles ahora se muestran en sus anchos predeterminados. No es necesario forzar múltiples elementos flexibles en una sola línea.

envoltura flexible iniciada

Hay un valor más, wrap-reverse.

Sí, lo has adivinado bien. Permite que los elementos flexibles se rompan en varias líneas, pero en la dirección inversa.

elementos flexibles envueltos en reversa

3. Flujo flexible

El flujo flexible es una propiedad abreviada que toma valores de dirección flexible y ajuste flexible.

¿Alguna vez usó la propiedad de taquigrafía de la frontera? borde: 1px rojo sólido.

Es el mismo concepto aquí. Múltiples valores declarados en una línea.

Vea el ejemplo a continuación.

ul {
    flujo flexible: ajuste de fila; / * dirección "fila" y sí, envuelva los elementos. * /
}
flujo flexible dividido en bits

Pruebe las otras combinaciones que esto podría tomar. flujo flexible: ajuste de fila, flujo flexible: ajuste de columna, flujo flexible: ajuste de columna

Los resultados producidos no son diferentes de lo que ha visto con los valores de dirección flexible y ajuste flexible.

Estoy seguro de que entiendes lo que producirían.

Pruébalos

4. Justificar contenido

La vida es realmente buena con el modelo Flexbox. Si todavía duda de eso, la propiedad justify-content puede convencerlo.

La propiedad justify-content adquiere cualquiera de los 5 valores siguientes.

ul {
    justify-content: flex-start || extremo flexible || centro || espacio intermedio || espacio alrededor
}

¿Y qué aporta exactamente la propiedad justificar contenido a la tabla?

Bueno, puede recordarle la propiedad de alineación de texto.

La propiedad de justificar contenido define cómo se disponen los elementos flexibles en el eje principal.

Un ejemplo rapido.

Considere la simple lista desordenada a continuación.

      
  • 1
  •   
  • 2
  •   
  • 3

Agregue un poco de estilo básico.

ul {
    borde: 1px rojo sólido;
    relleno: 0;
    estilo de lista: ninguno;
    color de fondo: # e8e8e9;
  }
li {
      color de fondo: # 8cacea;
      ancho: 100px;
      altura: 100 px;
      margen: 8px;
      acolchado: 4px;
  }

Deberías tener esto:

vista predeterminada después de

Con la propiedad justify-content, los tres elementos flexibles pueden alinearse a través del eje principal de la forma que desee.

Aquí está el desglose de lo que es posible.

(i) Inicio flexible

El valor predeterminado es flex-start.

flex-start agrupa todos los elementos flex al inicio del eje principal.

ul {
    justify-content: inicio flexible;
  }
justify-content: flex-start (comportamiento predeterminado)

(ii) Flex-end

flex-end agrupa los elementos flex al final del eje principal.

ul {
    justify-content: flex-end;
  }
justify-content: flex-end

(iii) Centro

Center hace exactamente lo que esperarías: centra los elementos flexibles a lo largo del eje principal.

ul {
    justify-content: centro;
  }
justify-content: centro

(iv) Espacio intermedio

El espacio intermedio mantiene el mismo espacio entre cada elemento flexible.

ul {
    justify-content: espacio intermedio;
  }
justify-content: espacio intermedio

¿Notaste algo diferente aquí?

Echa un vistazo a la imagen descriptiva a continuación.

(v) espacio alrededor

Finalmente, el espacio alrededor mantiene el mismo espacio alrededor de los elementos flexibles.

ul {
    justify-content: espacio alrededor;
  }
justify-content: espacio alrededor

Una segunda mirada no duele.

Vea la imagen descriptiva a continuación.

No se preocupe si esto parece demasiado para obtener. Con un poco de práctica, se sentirá muy cómodo con la sintaxis.

Asegúrese de comprender cómo afectan la visualización de elementos flexibles a lo largo del eje principal.

5. Alinear artículos

La propiedad align-items es algo similar a la propiedad justify-content.

Habiendo entendido la propiedad justify-content, esto debería ser más fácil de asimilar.

Align-items se puede establecer en cualquiera de estos valores: flex-start || extremo flexible || centro || estiramiento || base

/ * ul representa cualquier contenedor flexible * /
ul {
    alinear elementos: flex-start || extremo flexible || centro || estiramiento || base
}

Define cómo se disponen los elementos flexibles en el eje transversal. Esta es la diferencia entre la propiedad align-items y justify-content.

A continuación se muestra cómo los diferentes valores afectan los elementos flexibles.

No olvide la dirección afectada por estas propiedades. El eje transversal.

(yo estiro

El valor predeterminado es estirar. Esto "estirará" los elementos flexibles para que llenen toda la altura del contenedor flexible.

alinear elementos: estiramiento

(ii) Inicio flexible

El inicio flexible hace lo que esperas. Agrupa los elementos flexibles al inicio del eje transversal.

alinear elementos: inicio flexible

(iii) Extremo flexible

Como se esperaba, el extremo flexible agrupa los elementos flexibles al final del eje transversal.

elementos de alineación: extremo flexible

(iv) Centro

El valor central es igualmente predecible. Alinea los elementos flexibles al centro del contenedor flexible.

alinear elementos: centro

(v) Línea de base

¿Y el valor de referencia?

Alinea los elementos flexibles a lo largo de sus líneas de base.

elementos de alineación: línea de base

"Línea de base" realmente suena elegante.

El resultado parece parecerse al inicio flexible, pero es sutilmente diferente.

¿Qué diablos es "línea de base"?

La imagen a continuación debería ayudar.

¿Observa cómo todos los elementos flexibles están alineados para tener su asiento de contenido en la "línea base"?

6. Alinear contenido

Mientras habla de la propiedad de envoltura, ¿recuerda lo que sucedió cuando agregó más elementos flexibles al contenedor flexible?

Tienes un contenedor flexible de varias líneas.

La propiedad de alinear contenido se utiliza en contenedores flexibles de varias líneas.

Toma los mismos valores que los elementos de alineación aparte de la línea de base.

Por definición, controla cómo se alinean los elementos flexibles en un contenedor flexible de varias líneas.

Al igual que align-items, el valor predeterminado también es stretch

Estos son valores con los que ahora debería estar familiarizado. Entonces, así es como afectan a un contenedor flexible de varias líneas con 10 artículos flexibles.

(yo estiro

Con el estiramiento, los elementos flexibles se "estiran" para adaptarse al espacio disponible a lo largo del eje transversal.

El espacio que ve entre los elementos flexibles a continuación se debe al margen establecido en los elementos.

(ii) Inicio flexible

Ya has visto el valor de inicio flexible antes.

Esta vez alinea los elementos en el contenedor multilínea al inicio del eje transversal.

Recuerde que el eje transversal predeterminado es de arriba hacia abajo.

Por lo tanto, los artículos flexibles están alineados con la parte superior del contenedor flexible.

(iii) Extremo flexible

El valor del extremo flexible alinea los elementos flexibles al final del eje transversal.

(iv) Centro

Como puede haber adivinado, el centro alinea los elementos flexibles al centro del eje transversal.

Esa es la última de las propiedades del contenedor flexible.

Ahora comprende cómo usar las diversas propiedades del contenedor flexible.

Los usará para trabajar en las secciones prácticas que se presentan a continuación.

Las propiedades del artículo flexible

Orden || Flex-grow || Contracción flexible || Base flexible

En la sección anterior, expliqué los contenedores flexibles y sus propiedades de alineación.

Hermoso sin duda alguna.

Seguro que te das cuenta de lo que te espera.

Quitaría mi enfoque de los contenedores flexibles ahora y lo guiaré a través de los elementos flexibles y sus propiedades de alineación.

Al igual que los contenedores flexibles, también hay disponibles un par de propiedades de alineación en todos los artículos flexibles.

Déjame guiarte a través de ellos.

1. Orden

La propiedad de pedido permite reordenar los artículos flexibles dentro de un contenedor.

Básicamente, con la propiedad de pedido puede mover un elemento flexible de una posición a otra. Al igual que lo haría con listas "ordenables".

Esto se hace sin afectar el código fuente. Lo que significa que la posición de los elementos flexibles en el código fuente HTML no cambia.

El valor predeterminado para la propiedad de pedido es 0. Puede tomar valores negativos o positivos.

Vale la pena señalar que los artículos flexibles se reordenan en función de los valores numéricos de la propiedad del pedido. De menor a mayor.

Un ejemplo siempre hace el truco. Considere la siguiente lista desordenada:

        
  • 1
  •     
  • 2
  •     
  • 3
  •     
  • 4

Por defecto, todos los artículos flexibles tienen un valor de pedido de 0.

Tal como esperaba, obtiene esto (ver más abajo) después de un estilo básico.

Visualización predeterminada

Los elementos Flex se muestran tal como se especifica en el orden de origen HTML. Flexione el ítem 1, luego 2, 3 y 4.

¿Qué sucede si, por alguna razón, desea que el elemento flexible 1 aparezca en último lugar? ¿Sin cambiar el orden de origen en el documento HTML?

"Sin cambiar el orden de origen" significa que no puede hacer esto:

        
  • 2
  •     
  • 3
  •     
  • 4
  •     
  • 1

Ahora ahí es donde entra la propiedad del pedido.

Todo lo que necesita hacer es hacer que el valor del pedido del elemento flexible 1 sea más alto que el de otros elementos de la lista.

Si alguna vez usó la propiedad de índice z en elementos de bloque, estaría familiarizado con este tipo de cosas.

/ * selecciona el primer elemento li dentro del ul * /
    li: enésimo hijo (1) {
        orden: 1; / * darle un valor superior a 0 * /
    }

Los artículos flexibles se reordenan de menor a mayor.

No olvide que, por defecto, los elementos de lista 2, 3 y 4 tienen el valor de orden 0.

Ahora, el elemento flexible 1 tiene un valor de pedido de 1.

Nueva apariencia después de cambiar el valor del pedido para 1

Los elementos flexibles 2, 3 y 4 tienen un valor de orden de 0. Por lo tanto, el orden de origen HTML se mantiene, sin modificaciones en la pantalla predeterminada.

¿Qué pasa si le dio a flex-item 2 un valor de pedido de 2?

Sí, lo has adivinado bien. Sube la pila también. Ahora representa el elemento flexible con el valor de orden más alto.

El elemento flexible 2 ahora tiene un valor de pedido más alto

¿Y qué sucede cuando dos artículos flexibles tienen el mismo valor de pedido?

En el ejemplo a continuación, los elementos flexibles 1 y 3 reciben los mismos valores de orden

li: enésimo hijo (1) {
        orden: 1;
    }
li: enésimo hijo (3) {
        orden: 1;
    }
Flex-item 1 y 3 con el mismo valor de pedido

Los artículos todavía están ordenados de menor a mayor valor de pedido.

Esta vez, el elemento flexible 3 aparece en último lugar porque viene después del elemento flexible 1 en el archivo fuente (documento HTML).

El reordenamiento se basa en las posiciones en el archivo fuente, cuando dos o más elementos flexibles tienen el mismo valor de pedido.

Esa fue una gran explicación.

Me mudaría a otra propiedad.

2. Flex-grow y flex-shrink

La belleza de los artículos flexibles es ser "flexible".

Las propiedades de crecimiento flexible y contracción flexible nos permiten jugar con esta "flexibilidad" aún más.

Las propiedades flex-grow y flex-shrink controlan cuánto debe "crecer" (extenderse) un elemento flex si hay espacios adicionales, o "encogerse" si no hay espacios adicionales.

Pueden tomar cualquier valor que oscile entre 0 y cualquier número positivo. 0 || numero positivo

Déjame desmitificar eso.

Considere la simple lista desordenada a continuación. Comprende solo un elemento de la lista.

        
  • Soy una lista simple
ul {
    pantalla: flex;
}

Con un poco más de estilo, parece así.

Elemento flexible simple

Por defecto, la propiedad flex-grow está establecida en 0. Por implicación, el elemento flex NO crece para ajustarse a todo el espacio disponible.

El valor 0 es como un interruptor de "apagado". El interruptor de crecimiento flexible está apagado.

Sin embargo, si cambió el valor de crecimiento flexible a 1, esto es lo que sucede.

El elemento flexible crece para llenar el espacio disponible.

El elemento flexible ahora "crece" para ocupar todo el espacio disponible. ¡El interruptor está encendido!

Si intenta cambiar el tamaño de su navegador, el elemento flexible también se "reduciría" para acomodar el nuevo ancho de pantalla.

¿Por qué? Por defecto, la propiedad de reducción se establece en 1. ¡Lo que significa que el interruptor de reducción flexible también está activado!

Examinaré más de cerca las propiedades de crecimiento flexible y contracción flexible en caso de que todavía no se sienta seguro con su comprensión de esto.

3. Base flexible

¿Recuerdas cómo dije que la belleza de los artículos flexibles es ser "flexible"? Bueno, parece que también tienes control sobre eso.

La propiedad de base flexible especifica el tamaño inicial de un elemento flexible. Antes de que las propiedades de crecimiento flexible o contracción flexible ajusten su tamaño para que se ajuste al contenedor o no.

La declaración anterior es realmente importante, así que me estoy tomando un momento para reforzar eso.

El valor predeterminado es flex-base: auto. La base flexible puede tomar cualquier valor que use en la propiedad de ancho normal. Es decir, porcentajes || ems || rems || píxeles, etc.

Tenga en cuenta que cuando intente establecer la propiedad base en un valor basado en cero, use la unidad también. Utilice base flexible: 0px no solo base flexible: 0

Volvería a traer el ejemplo de "una lista" aquí nuevamente.

        
  • Soy una lista simple
ul {
    pantalla: flex
}
li {
    acolchado: 4px; / * algo de espacio para respirar * /
}

De manera predeterminada, el ancho inicial del elemento flexible está influenciado por el valor predeterminado, base flexible: automático.

El ancho del elemento flexible se calcula "automáticamente" en función del tamaño del contenido (y, obviamente, más cualquier relleno que configure también).

visualización predeterminada

Esto significa que si aumentó el contenido en el elemento flexible, automáticamente cambiará su tamaño para ajustarse.

        
  • Soy una lista simple Y soy una lista simple
el ancho se calcula automáticamente

Sin embargo, si desea establecer el elemento flexible en un ancho fijo, también puede hacer esto:

li {
    base flexible: 150 px;
}

Ahora el elemento flexible se ha limitado a un ancho de 150 px.

elemento flexible con un ancho restringido

Se está volviendo aún más interesante.

4. La taquigrafía flexible

La taquigrafía flexible le permite establecer las propiedades de crecimiento flexible, contracción flexible y base flexible al mismo tiempo.

Cuando sea apropiado, le aconsejo que configure las tres propiedades a la vez usando la abreviatura flex que hacerlo individualmente.

li {
  flex: 0 1 auto;
}

El código anterior es igual a establecer las tres propiedades: flex-grow: 0; encogimiento flexible: 1; base flexible: auto

Tenga en cuenta el pedido.

Flex-grow primero, luego flex-shrink, y luego flex-base. El acrónimo, GSB puede ayudar.

¿Qué sucede si no puede establecer uno de los valores en la taquigrafía flexible?

Si establece solo los valores flex-grow y flex-shrink, flex-base sería predeterminado a cero.

Esto se llama flexión absoluta. Y cuando establece solo la base flexible, obtiene una flexión relativa.

/ * este es un elemento flexible absoluto * /
li {
  flexión: 1 1; / * el valor predeterminado de base flexible es 0 * /
}
/ * este es un elemento flexible relativo * /
li {
  base flexible: 200 px; / * solo se establece la base flexible * /
}

Sé lo que estás pensando. ¿Cuál es el propósito de la flexión relativa y absoluta?

Respondo esa pregunta más adelante en este artículo. Nuevamente, la confianza ciega será suficiente por ahora.

Echemos un vistazo a algunos valores de taquigrafía flexible muy útiles.

1. flex: 0 1 auto

/ * nuevamente, el "li" representa cualquier elemento flexible * /
li {
  flex: 0 1 auto;
}

Esto es lo mismo que escribir flex: default y es el comportamiento predeterminado de todos los elementos flex.

Déjame desglosar esto, solo un poco.

Es más fácil entender esto al echar un vistazo primero a la propiedad de base flexible.

La base flexible se establece en automático, lo que significa que el ancho inicial del elemento flexible se determinará automáticamente en función del tamaño del contenido.

¿Lo tengo?

Pasando a la siguiente propiedad, el valor de crecimiento flexible es cero. Esto significa que la propiedad flex-grow no alterará el ancho inicial del elemento flex.

El interruptor de crecimiento está apagado.

Como flex-grow controla el "crecimiento" de los elementos flexibles y se establece en cero, los elementos flexibles no "crecerán" para ajustarse a la pantalla.

Finalmente, el valor de contracción flexible es 1. Dice esto: "encoge el elemento flexible cuando sea necesario"

Esto es lo que parece cuando se aplica a algunos elementos flexibles.

flex: 0 1 auto

Observe cómo los elementos flexibles no crecen. El ancho se calcula automáticamente y se reducen al cambiar el tamaño del navegador, si es necesario.

2. Flex: 0 0 auto

/ * nuevamente, el "li" representa cualquier elemento de la lista * /
li {
  flex: 0 0 auto;
}

Esto es lo mismo que flex: none.

Usando el mismo marco que establecí anteriormente, el ancho se calcula automáticamente PERO el elemento flexible NO crece ni se contrae (ambos están configurados en cero).

Los interruptores de crecimiento y contracción están apagados.

Es esencialmente un elemento de ancho fijo cuyo ancho inicial se basa en el tamaño del contenido en el elemento flexible.

Vea cómo esta taquigrafía flexible afecta a dos elementos flexibles. Uno contiene más contenido que el otro.

Flex: 0 0 auto

Lo primero que debe notar es que los elementos flexibles tienen anchos diferentes.

Eso se espera ya que los anchos se calculan automáticamente, en función del tamaño del contenido.

Intente cambiar el tamaño de su navegador y notará que los elementos flexibles no se contraen con su ancho. Aparecen del elemento principal, y debe desplazar su navegador horizontalmente para ver todo el contenido.

No se preocupe, más adelante le mostraré cómo lidiar con este comportamiento extraño.

Al cambiar el tamaño del navegador, los elementos flexibles NO se reducen. En cambio, salen del contenedor flexible.

3. Flex: 1 1 auto

Esto es lo mismo que flex: auto.

Use el marco que establecí anteriormente.

Esto dice, "calcule el ancho inicial automáticamente, pero crezca para adaptarse al espacio disponible completo y reduzca si es necesario"

Los interruptores de crecimiento y contracción se activan y los anchos se calculan automáticamente.

Flex: 1 1 auto

Esta vez, los elementos llenan el espacio disponible y también se reducen al cambiar el tamaño del navegador.

4. Flex: "número positivo"

Donde "número positivo" representa cualquier número positivo (sin las comillas)

Esto es lo mismo que flex: "número positivo" 1 0.

flex: 2 1 0 es lo mismo que writingflex: 2 2 representa cualquier número positivo.

/ * nuevamente, el "li" representa cualquier elemento de la lista * /
li {
  flexión: 2 1 0; / * igual que flex: 2 * /
}

Siguiendo el mismo marco que establecí anteriormente, esto dice: "establezca el ancho inicial del elemento flexible en cero (ehm, ¿no ancho?), Haga crecer el elemento para llenar el espacio disponible y finalmente reduzca el elemento siempre que sea posible"

Con los elementos flexibles sin "ancho", ¿cómo se calcula el ancho?

El valor de crecimiento flexible se hace cargo y determina el grado en que el elemento flexible se “amplía”.

Eso se encarga del problema de no ancho.

Es más práctico usar esta abreviatura flexible cuando tiene más de un elemento flexible cuyos anchos iniciales, base flexible se establecen en cualquier valor basado en cero, p. 0px

Lo que realmente sucede es que los anchos de los elementos flexibles se calculan en función de las proporciones del valor de crecimiento flexible.

Desglosaría eso un poco.

Considere dos elementos de la lista marcados y diseñados a continuación.

        
  • Soy uno
  •     
  • Soy dos
ul {
    pantalla: flex;
}
/ * primer elemento flexible * /
li: enésimo hijo (1) {
    flexión: 2 1 0; / * igual que solo escribir flex: 2 * /
}
/ * segundo elemento flexible * /
li: enésimo hijo (2) {
    flex: 1 1 0;
    color de fondo: # 8cacea;
}

Recuerde que la configuración flex-grow: 1 permite que el elemento flexible llene el espacio disponible. El interruptor de crecimiento está activado.

Aquí tienes dos artículos flexibles. Uno tiene una propiedad de crecimiento rápido de 1 y el otro 2, ¿qué sucede entonces?

Tienes los interruptores de crecimiento activados para ambos elementos. Sin embargo, la magnitud del crecimiento difiere. 1 y 2.

Ambos se expanden para llenar el espacio disponible, pero en alguna proporción.

Así es como funciona.

El último ocupa 2/3 del espacio disponible, mientras que el primero ocupa 1/3.

¿Sabes cómo llegué a eso?

Relación matemática básica. relación individual / relación total Espero que no te hayas saltado esas clases de matemáticas.

artículos flexibles que comparten espacio

¿Ves lo que está pasando?

Aunque ambos elementos flexibles tienen contenidos del mismo tamaño (aproximadamente), sin embargo ocupan diferentes espacios.

Los anchos no se basan en el tamaño del contenido, sino en los valores de crecimiento.

Uno es aproximadamente dos veces el otro.

5. Alinearse

La propiedad de alineación propia da un paso más al darnos tanto control sobre los elementos flexibles.

Ya viste cómo la propiedad de alinear elementos ayuda a alinear colectivamente todos los elementos flexibles dentro de un contenedor flexible.

¿Qué sucede si desea cambiar la posición de un solo elemento flexible a lo largo del eje transversal, sin afectar los elementos flexibles vecinos?

Aquí es donde la propiedad de alinearse se rescata.

Puede tomar cualquiera de estos valores: auto || inicio flexible || extremo flexible || centro || línea de base || tramo

/ * objetivo del primer elemento de la lista * /
li: primero de tipo {
    autoalinear: auto || inicio flexible || extremo flexible || centro || línea de base || tramo
}

Estos son valores con los que ya está familiarizado, pero a modo de actualización, así es como afectan a un elemento específico en particular.

En este caso, el primer artículo dentro del contenedor.

El objeto flexible objetivo está en rojo.

1. Flex-end

flex-end alinea el elemento seleccionado al final del eje transversal.

elemento flexible dirigido al final del eje transversal

2. Centro

center alinea el elemento seleccionado al centro del eje transversal.

elemento flexible dirigido en el centro del eje transversal

3. Estiramiento

estirar “estira” el elemento flexible objetivo para llenar el espacio disponible a lo largo del eje transversal.

elemento flexible dirigido estirado a lo largo del eje transversal

4. Línea de base

línea base alinea el elemento flexible objetivo a lo largo de la línea base.

Parece el mismo resultado que el inicio flexible, pero estoy seguro de que comprende cuál es la línea de base.

Lo expliqué mucho antes.

elemento flexible dirigido alineado a lo largo de la línea base

5. auto

auto establece el valor del elemento flexible de destino en el valor de alinear elementos del elemento primario o estirarlo si el elemento no tiene elemento primario.

En el siguiente caso, el contenedor flexible tiene un valor de elementos de alineación de inicio flexible

Esto alinea todos los elementos flexibles al inicio del eje transversal.

El elemento flexible objetivo ahora hereda el valor de inicio flexible: el valor de elementos de alineación del padre.

elemento flexible dirigido alineado a lo largo del inicio del eje transversal

Este es el estilo base en los elementos flexibles utilizados anteriormente. Solo para que entiendas lo que está sucediendo aún mejor.

ul {
    pantalla: flex;
    borde: 1px rojo sólido;
    relleno: 0;
    estilo de lista: ninguno;
    justify-content: espacio intermedio;
    alinear elementos: inicio flexible; / * afecta a todos los elementos flexibles * /
    altura mínima: 50%;
    color de fondo: # e8e8e9;
}
li {
  ancho: 100px;
  color de fondo: # 8cacea;
  margen: 8px;
  tamaño de fuente: 2rem;
}

Te estás preparando para la parte divertida ahora :-)

Artículos flexibles absolutos y relativos.

Habiendo cubierto algo de terreno en secciones anteriores, es importante aclarar algunos conceptos importantes aquí también.

¿Cuál es realmente la diferencia entre un elemento flexible absoluto y relativo?

La principal diferencia entre estos dos tiene que ver con el espaciado y cómo se calculan.

El espacio dentro de un elemento flexible relativo se calcula en función del tamaño del contenido. En un elemento flex absoluto, se basa únicamente en "flex", no en contenido.

Considere el marcado a continuación.

        
  •         Este es solo un texto aleatorio para reforzar el punto que se explica.     Algún texto más al azar para reforzar el punto que se explica.     
    
  • Esto es solo un texto aleatorio más corto.
  • Dos elementos de la lista. Uno tiene muchos más textos que el otro.

    Añade un poco de estilo.

    ul {
        pantalla: flex; / * flexbox activado * /
    }
    li {
        flex: auto; / * recuerda que esto es lo mismo que flex: 1 1 auto; * /
        borde: 2px rojo sólido;
        margen: 2em;
    }

    Aquí está el resultado:

    Si ya lo olvidó, flex: 1 1 auto es lo mismo que establecer: flex-grow: 1 flex-shrink: 1 y flex-base: auto

    Usando el marco que establecí anteriormente, los anchos iniciales de los elementos flexibles se calculan automáticamente de forma flexible: automático, y luego "crecen" para adaptarse al espacio disponible flex-grow: 1.

    Cuando los elementos flexibles tienen sus anchos calculados automáticamente, base flexible: auto, se basa en el tamaño del contenido contenido dentro de los elementos flexibles.

    Los elementos flexibles en el ejemplo anterior NO tienen contenidos del mismo tamaño. Por lo tanto, los tamaños de los artículos flexibles serían desiguales.

    Dado que los anchos individuales no eran iguales en primer lugar (se basaba en el contenido), cuando los elementos crecen, los anchos también permanecen desiguales.

    Los elementos flex del ejemplo anterior son elementos flex relativos.

    Hagamos que los elementos flexibles sean absolutos, lo que significa que esta vez sus anchos deben basarse en el tamaño de contenido "flexible" NO.

    Un "one-liner" hace la magia.

    li {
        flexión: 1; / * igual que flex: 1 1 0 * /
    }

    Ver el resultado a continuación.

    ¿Ves que ambos artículos flexibles tienen el mismo ancho esta vez?

    El ancho inicial de los elementos flexibles es cero base flexible: 0, y luego "crecen" para adaptarse al espacio disponible.

    Cuando hay dos o más elementos flexibles con valores de base flexible basados ​​en cero, comparten el espacio disponible en función de los valores de crecimiento flexible.

    Hablé sobre esto antes.

    Ahora los anchos no se calculan en función del tamaño del contenido. Los anchos se basan en el valor flexible especificado.

    Entonces lo tienes. ¿Correcto?

    Los elementos flex absolutos tienen sus anchos basados ​​únicamente en flex, mientras que los elementos flex relativos tienen sus anchos en función del tamaño del contenido.

    Alineación de margen automático

    Cuidado con el margen: alineación automática en artículos flexibles.

    Cuando usa margin: auto en flex-items, las cosas pueden parecer bastante extrañas.

    Necesitas entender lo que está pasando. Puede dar lugar a resultados inesperados, pero voy a explicar todo eso.

    Cuando usa margin: auto en un elemento flexible, la dirección (izquierda, derecha o ambas) que tiene el valor auto ocupará los espacios vacíos disponibles.

    Esa es una difícil de atrapar.

    Esto es lo que quiero decir.

    Considere la barra de navegación marcada y con estilo a continuación:

          
    • Marca
    •     
    • Inicio
    •     
    • Servicios
    •     
    • Acerca de
    •     
    • Contacto
    ul {
        pantalla: flex;
    }
    li {
        flex: 0 0 auto;
    }

    Vea el resultado de eso a continuación.

    Barra de navegación simple

    Hay un par de cosas a tener en cuenta aquí:

    1. El valor de crecimiento flexible se establece en cero. Esto explica por qué los elementos de la lista no crecen
    2. Los elementos flexibles se alinean al inicio del eje principal (el comportamiento predeterminado)
    3. Debido a que los elementos se alinean al inicio del eje principal, queda algo de espacio adicional a la derecha. ¿Ves eso?

    Ahora use margin: auto en el primer elemento de la lista (marca) y vea qué sucede.

    li: enésimo hijo (1) {
        margen derecho: auto; / * aplicado solo a la derecha * /
    }
    margen: aplicado automáticamente a

    ¿Lo que acaba de suceder?

    El espacio extra que existía ahora se ha distribuido a la derecha del primer elemento flexible.

    ¿Recuerdas lo que dije antes?

    Cuando usa margin: auto en un elemento flexible, la dirección (izquierda, derecha o ambas) que tiene el valorauto ocupará los espacios vacíos disponibles.

    ¿Qué sucede si desea una alineación automática de márgenes en ambos lados de un elemento flexible?

    / * puede usar la abreviatura de margen para establecer ambos lados si lo desea * /
    li: enésimo hijo (1) {
        margen izquierdo: auto;
        margen derecho: auto
    }
    margen: auto aplicado en ambos lados de la

    Ahora el espacio se distribuye a ambos lados del elemento flexible.

    Entonces, ¿hay una compensación con la genial alineación de margen automático?

    Parece que hay uno. Puede ser una fuente de frustración si no prestas atención también.

    Cuando utiliza la alineación de margen automático en un elemento flexible, la propiedad justificar contenido ya no funciona.

    Por ejemplo, establecer una opción de alineación diferente en el contenedor flexible anterior a través de la propiedad justify-content no tiene ningún impacto en el diseño.

    ul {
        justify-content: flex-end;
    }
    justify-content no tiene impacto

    Casos de uso práctico

    Los sistemas de navegación son una parte muy importante de cada sitio web o aplicación. Todos los sitios web del planeta tienen algún tipo de sistema de navegación.

    Eche un vistazo a estos sitios populares y cómo se acercan a sus sistemas de navegación.

    ¿Ves cómo Flexbox puede ayudarte a construir estos diseños de manera más eficiente?

    Eche un vistazo más de cerca para ver dónde la función de margen automático también puede ser muy útil.

    (i) Navegación Bootstrap

    (ii) Navegación de escritorio AirBnB

    (iii) Navegación de escritorio de Twitter

    Te recomiendo que realmente escribas código como una forma de práctica. He escrito una guía práctica aquí: Las barras de navegación más populares creadas con Flexbox

    Ve a echar un vistazo.

    Esperaré.

    ¿Qué sucede cuando cambias la dirección flexible?

    Advertencia justa: hay algunas cosas raras en el camino.

    Al comenzar a aprender el modelo Flexbox, esta parte fue la más confusa.

    Apuesto a que muchos recién llegados al "mundo flexible" también lo encuentran así.

    ¿Recuerdas cuando hablé sobre el eje principal y el eje transversal predeterminados en las direcciones "de izquierda a derecha" y "de arriba a abajo"?

    Bueno, tú también puedes cambiar eso.

    Esto es exactamente lo que sucede cuando usa flex-direction: column como se describe en una sección anterior.

    Cuando usa flex-direction: column, el eje principal y el eje transversal se cambian como se ve a continuación.

    eje principal y transversal por defectoNuevo eje principal y transversal

    Si alguna vez ha escrito algún texto en inglés, ya sabe que el idioma se escribe de izquierda a derecha y de arriba a abajo.

    Esa es igualmente la dirección tomada para el eje principal y transversal predeterminado de Flexbox, también.

    Sin embargo, al cambiar la dirección de flexión a columna, ¡ya no sigue el patrón de "Idioma inglés" sino japonés!

    Oh si, japonés.

    Si ha escrito algún texto en japonés, le resultará familiar. (Para el registro, nunca he escrito ningún texto en japonés).

    ¡El texto japonés se escribe tradicionalmente de arriba a abajo! No es tan raro, ¿eh?

    Eso explica por qué esto puede ser un poco confuso para los escritores ingleses.

    Nuevo eje principal y transversal

    Echale un vistazo a éste ejemplo. La lista desordenada estándar con 3 elementos de lista, excepto que esta vez cambiaré la dirección flexible.

              
    •         
    •         
    •     
    ul {
        pantalla: flex;
        dirección flexible: columna;
    }

    Aquí está el aspecto antes del cambio de dirección:

    Y luego:

    ¿Entonces qué pasó?

    El "texto" ahora está escrito en estilo japonés, de arriba a abajo (eje principal).

    Hay algo que le puede resultar divertido, me encantaría señalarlo.

    Ves que el ancho de los elementos llena el espacio, ¿verdad?

    Si tuvieras que cambiar eso antes, solo lidiarías con las propiedades de base flexible y (o) de crecimiento flexible.

    Veamos cómo afectan a nuestro nuevo diseño.

    li {
        base flexible: 100px;
    }

    ... y esto es lo que obtendrás.

    ¿Wow Qué? ¿La altura se ve afectada, pero no el ancho?

    Como dije anteriormente, la propiedad de base flexible define el ancho inicial de cada elemento flexible.

    Estaba equivocado, o mejor dicho, estaba pensando en "inglés". Cambiemos al japonés por un momento.

    No siempre tiene que ser "ancho".

    Al cambiar la dirección flexible, tenga en cuenta que todas las propiedades que afectaron al eje principal ahora afectan al nuevo eje principal.

    Una propiedad como flex-base que afectaba el ancho de los elementos flexibles a lo largo del eje principal ahora afecta la altura, NO el ancho.

    La dirección ha sido cambiada!

    Entonces, incluso si usara la propiedad de crecimiento flexible, también afectaría la altura.

    Esencialmente, cada propiedad de flexión que operaba en el eje horizontal (entonces el eje principal) ahora opera verticalmente, el nuevo eje principal.

    Es solo un cambio de dirección.

    Aquí hay un ejemplo más. Te prometo que comprenderás mejor después de este.

    Reduzca el ancho de los elementos flexibles que observamos justo antes, y ya no ocupan todo el espacio:

    li {
        ancho: 200 px;
    }

    ¿Qué sucede si desea mover los elementos de la lista al centro de la pantalla?

    En inglés, así es como ha manejado los contenedores flexibles hasta ahora. Eso significaría "mover los elementos flexibles al centro del eje principal".

    Entonces, habría utilizado justify-content: center

    Pero hacer eso ahora no funciona.

    Como la dirección ha cambiado, el centro está a lo largo del eje transversal, no el eje principal.

    Echa un vistazo de nuevo:

    Nuevo eje principal y transversal

    Así que por favor piense en términos de texto en japonés.

    El eje principal es de arriba hacia abajo, no es necesario.

    El eje transversal es de izquierda a derecha. Suena como lo que necesitas.

    Debe "mover los elementos flexibles al centro del eje transversal".

    ¿Alguna propiedad de contenedor flexible suena aquí?

    Sí, la propiedad de elementos de alineación.

    La propiedad align-items se ocupa de la alineación en el eje transversal.

    Entonces, para moverlos al centro, harías esto:

    ul {
        alinear elementos: centro;
    }

    ¡Y voilá! Tienes los elementos flexibles centrados.

    elementos flexibles centrados en la nueva dirección

    Puede ser un poco confuso, lo sé. Solo repítelo una vez más si es necesario.

    Mientras estudiaba el modelo Flexbox, noté que muchos libros CSS se saltaban esta parte.

    Pensar un poco en el texto en japonés sería de gran ayuda.

    Vale la pena entender que todas las propiedades de Flexbox funcionan en función de la dirección de flexión que está en su lugar.

    Estoy seguro de que aprendiste algo nuevo otra vez. Me estoy divirtiendo explicando esto. Espero que te estés divirtiendo también :-)

    Oh, Dios mío, ¿Flexbox resolvió eso?

    Flexbox ha resuelto trivialmente algunos problemas clásicos que enfrentan muchos diseñadores con CSS.

    Philip Walton, en su proyecto resuelto por flexbox, enumera 6 problemas clásicos (a partir de este escrito).

    Analiza ampliamente las limitaciones anteriores con CSS, y la solución actual que ofrece Flexbox.

    Te recomiendo que eches un vistazo después de completar este artículo.

    En la próxima sección práctica, explicaré algunos de los conceptos que aborda mientras lo guío a través de la creación de un diseño de aplicación de música con Flexbox.

    Flexbugs y gotchas para navegadores no conformes

    Si no eres el tipo de persona que escribe CSS en sus sueños, es posible que desees ver este repositorio de Github.

    Algunas personas que son más inteligentes que yo seleccionan una lista de errores de Flexbox y sus soluciones allí.

    Es el primer lugar donde miro cuando algo no funciona como esperaba.

    Te explicaré algunos errores importantes en la sección práctica que sigue a continuación.

    ¡Entonces estás cubierto!

    Creación de un diseño de aplicación de música con Flexbox

    Después de caminar por las aburridas cosas rigurosas, te mereces un proyecto divertido.

    Es hora de recorrer un ejemplo práctico y aplicar sus habilidades de Flexbox recién adquiridas.

    Me llevó días encontrar un buen proyecto.

    Debido a la falta de una opción creativa, se me ocurrió un diseño de aplicación de música para gatos.

    Yo lo llamo música maliciosa.

    Tal vez para 2036, tendríamos gatos cantando en bandas de rock en algún lugar de Marte :-)

    Así es como se ve el diseño terminado, y está completamente diseñado con Flexbox.

    Puedes verlo en línea aquí.

    Si ve eso en un dispositivo móvil, tendrá un aspecto ligeramente diferente. Eso es algo en lo que trabajará en la sección de diseño receptivo de este artículo.

    Sin embargo, tengo una confesión que hacer.

    He hecho algo considerado incorrecto por muchos.

    He construido completamente el diseño general con Flexbox.

    Por muchas razones, esto puede no ser ideal. Pero es intencional en este escenario. Me propuse mostrarle todas las cosas que puede hacer con Flexbox, todo en un solo proyecto.

    Si tiene curiosidad sobre cuándo se considera correcto o incorrecto usar el modelo Flexbox, puede consultar mi artículo al respecto.

    Ahí, me lo quité del pecho. Ahora estoy seguro de que nadie me va a gritar después de leer esto.

    Todo en Catty Music se presenta utilizando el modelo Flexbox; esto es intencional para mostrar lo que es posible.

    ¡Así que construyamos esta cosa!

    Al igual que con cualquier proyecto razonable, un poco de planificación ayuda mucho a detectar las ineficiencias.

    Déjame llevarte a través de un enfoque planificado para construir el diseño de música maliciosa.

    Por donde empiezas

    Siempre que construya un diseño con Flexbox, debe comenzar buscando qué secciones de su diseño pueden destacarse como contenedores flexibles.

    Luego, aprovecha las poderosas propiedades de alineación que Flexbox pone a disposición.

    La caida

    Puede tener el cuerpo contenedor general como un contenedor flexible (contenido dentro del borde rojo en la imagen a continuación) y hacer que las otras secciones del diseño se dividan en elementos flexibles (elementos 1 y 2).

    Esto tiene mucho sentido, ya que el elemento 1 contiene cada parte del diseño que no sea el "pie de página", la sección que contiene los botones de control de música.

    ¿Sabía que un artículo flexible también podría convertirse en un contenedor flexible?

    ¡Sí, es posible!

    Puedes anidar tan profundo como quieras (aunque lo más sensato es mantener esto a un nivel razonable).

    Entonces, con esa nueva revelación viene esto ...

    El elemento 1 (el primer elemento flexible) también se puede hacer un contenedor flexible.

    La barra lateral (elemento 1b) y la sección principal (elemento 1a) serían elementos flex.

    Todavía estás conmigo, ¿verdad?

    Descomponer su diseño de esta manera le brinda un muy buen modelo mental para trabajar.

    Cuando comience a crear diseños aún más complejos con el modelo Flexbox, verá cuán vital es esto.

    No necesita una imagen elegante como las de arriba. Un simple boceto de papel áspero debería estar bien para comenzar.

    ¿Recuerdas que dije que podrías anidar tan profundo como quisieras? Parece que puedes anidar uno más aquí.

    Eche un vistazo a la sección principal anterior (elemento 1a).

    También se podría hacer un contenedor flexible para alojar las secciones resaltadas a continuación. "Artículo 1a - A" y "Artículo 1a - B"

    Puede decidir no hacer que la sección principal (elemento 1a) sea un contenedor flexible y simplemente colocar dentro de ella dos "divs" para alojar las secciones resaltadas.

    Sí, eso es posible, ya que el "Artículo 1a - A" y el "Artículo 1a - B" están apilados verticalmente.

    Por defecto, los "divs" se apilan verticalmente. Así es como funciona el modelo de caja.

    Si elige hacer que la sección principal sea un contenedor flexible, obtendrá las poderosas propiedades de alineación a su disposición. Por si acaso los necesitas en cualquier momento.

    El "flex" en Flexbox significa flexible.

    Los contenedores flexibles son, por defecto, flexibles, de buena respuesta.

    Esta puede ser otra razón para usar un contenedor flexible sobre "divs" regulares. Sin embargo, esto depende del caso.

    Voy a tocar algunas otras cosas a medida que construyes música maliciosa. Deberías escribir un código ahora.

    Configuración básica de HTML

    Comience con el HTML básico configurado a continuación.

    
      
      
       Catty Music 
      
      
    
    

    Así que estilo esto ...

    html,
      cuerpo {
        altura: 100%; / * establecer esto explícitamente es importante * /
      }
    cuerpo {
        pantalla: flex; / * superpoderes flex activados! * /
        dirección flexible: columna; / * Apilar los elementos flexibles (elementos principales y de pie de página) verticalmente NO horizontalmente * /
      }

    El primer paso para usar el modelo Flexbox es establecer un contenedor flexible.

    Esto es exactamente lo que hace el código anterior. Establece la propiedad de visualización del elemento del cuerpo para flexionar

    Ahora tiene un contenedor flexible, el elemento del cuerpo.

    Los elementos flexibles también se definen (elemento 1 y elemento 2), como en el desglose realizado anteriormente.

    Tenga en cuenta que debería echar un vistazo a las imágenes que mostré en mi desglose inicial antes si este concepto todavía le parece confuso.

    Manteniendo la imagen del final a la vista, debe hacer que los elementos flexibles funcionen.

    Haz que el pie de página se pegue al fondo.

    El pie de página que contiene los controles de música se pega al final de la página, mientras que la sección principal llena el espacio restante.

    ¿Cómo haces eso?

    principal {
        flex: 1 0 auto; / * llenar el espacio disponible * /
      }
    pie de página {
        flex: 0 0 90px; / * no crezca ni se contraiga, simplemente manténgase a una altura de 90 px. * /
      }

    Por favor, vea los comentarios en la lista de códigos anterior.

    Gracias a la propiedad flex-grow. Es relativamente fácil que la sección principal llene todo el espacio.

    Simplemente establezca el valor de crecimiento flexible en 1. También debe establecer la propiedad de reducción flexible en cero. ¿Por qué?

    La razón puede no ser evidente aquí porque se cambia la dirección de flexión.

    En algunos navegadores, hay un error que permite que los elementos flexibles se reduzcan por debajo de su tamaño de contenido. Es un comportamiento bastante extraño.

    La solución a este error es mantener el valor de contracción flexible en 0, no el valor predeterminado de 1, y también establecer la propiedad de base flexible en auto.

    Es como decir: "Calcule el tamaño del elemento flexible automáticamente, pero nunca lo reduzca".

    Con este valor abreviado, aún obtiene el comportamiento predeterminado de los elementos flexibles.

    El elemento flexible se reduciría al cambiar el tamaño del navegador. El cambio de tamaño no se basa en la propiedad de reducción. Se basa en volver a calcular el ancho del elemento flexible automáticamente. base flexible: auto

    Esto hará que el elemento flexible sea al menos tan grande como su ancho o alto (si se declara) o su tamaño de contenido predeterminado.

    No olvide el marco para el que desglosé las propiedades de la taquigrafía flexible. Habrá muchas cosas de taquigrafía por venir.

    Ahora que las cosas se están uniendo, agreguemos un poco de estilo para definir el espaciado y los colores:

    cuerpo {
        pantalla: flex;
        dirección flexible: columna;
        color de fondo: #fff;
        margen: 0;
        Familia tipográfica: Lato, sans-serif;
        color: # 222;
        tamaño de fuente: 0.9em;
      }
      pie de página {
        flex: 0 0 90px;
        acolchado: 10px;
        color: #fff;
        color de fondo: rgba (61, 100, 158, .9);
      }

    Nada mágico todavía.

    Esto es lo que deberías tener ahora:

    Al ver cómo las cosas comienzan a tomar forma, lo mejorará aún más.

    Repara la barra lateral.

    Si está codificando, actualice su documento HTML.

    
      
      

    La lista anterior es bastante explicativa.

    Para los conjuntos de iconos, estoy usando la popular biblioteca Font Awesome.

    Tener el icono deseado es tan simple como agregar una clase CSS. Esto es lo que he hecho dentro de la etiqueta aparte.

    Como se explicó anteriormente, la sección "principal" anterior también se convertirá en un contenedor flexible. La barra lateral (representada por la etiqueta de un lado) y la sección serán elementos flexibles.

    principal {
      flex: 1 0 auto; / * Es un elemento flexible * /
      pantalla: flex; / * ¡Acabo de incluir esto! - ahora un contenedor flexible con elementos flexibles: barra lateral y sección de contenido principal * /
      }

    Muy bien, esto se está poniendo interesante, ¿eh?

    Ahora tiene la sección principal como contenedor flexible. Trate con uno de sus elementos flexibles, la barra lateral.

    Al igual que hizo que el pie de página se pegue en la parte inferior de la página, también desea que la barra lateral se pegue, esta vez a la izquierda de la página.

    a un lado {
       
        flex: 0 0 40px; / * no crezca ni se encoja. Mantente fijo a 40 px * /
    }

    La barra lateral debe tener iconos apilados verticalmente.

    Puede hacer que la barra lateral sea un contenedor flexible y darle una dirección flexible que permita que todos los iconos se apilen verticalmente.

    Luego aplique una propiedad de alineación para tener los iconos en posición.

    Vea cómo puede hacer esto en la lista a continuación.

    a un lado {
       
        / * ... * /
        pantalla: flex; / * Ahora también un contenedor flexible * /
      
        
        dirección flexible: columna; / * iconos de pila verticalmente * /
      
        
        / * dado que se cambia la dirección, esto funciona en la dirección vertical * /
        justify-content: espacio alrededor;
        
        alinear elementos: centro; / * la dirección ha cambiado! Esto afecta la dirección horizontal. Coloca iconos en el centro * /
      
       
         color de fondo: # f2f2f2; / * hazme bonita * /
      }
         a un lado i.fa {
            tamaño de fuente: 0.9em; / * tamaño de fuente para los iconos * /
      }

    He comentado obsesivamente a través del código anterior y ahora veo lo bonito que está todo.

    Súper ordenado con pocas líneas de códigos.

    Códigos razonables, no hacks desordenados.

    Barra lateral tratada muy bien

    La sección de contenido principal está actualmente vacía. No olvides que es el segundo elemento de la lista. La barra lateral es la primera.

    Pon algunas cosas allí.

    Agregar contenido a la sección principal.

    Puede volver a echar un vistazo al proyecto terminado para no perder de vista hacia dónde se dirige.

    Más importante aún, lo ayudaría a comprender la siguiente lista de códigos.

    Actualice su documento HTML y tenga estos dentro de la sección .content.

          
         
              
                

    CattyBoard Top 100 Gráficos individuales (11.06.36)

                

    Artista desconocido

                

    2016. Gráficos 100 canciones

              
             
                 & nbsp; Reproducir todo              & nbsp; Añadir a              & nbsp; & nbsp; Más           
         
     
            
    •           

      1. One Dance

                

      Crake feat CatKid & amp; Cyla

                

      2:54

                

      SINCRONIZACIÓN CATTY CLOUD

            
          
  •           

    2. Panda

              

    Cattee

              

    4:06

              

    SINCRONIZACIÓN CATTY CLOUD

          
  •       
  •           

    3. ¡No puedo detener el sentimiento!

              

    Catin Cimberlake

              

    3:56

              

    SINCRONIZACIÓN CATTY CLOUD

          
  •       
  •           

    4. Trabajar desde casa

              

    Cat Harmony feat Colla

              

    3:34

              

    SINCRONIZACIÓN CATTY CLOUD

          
  •     

    Um, agregué un poco más que la última vez, pero es bastante simple.

    Rellené la sección de contenido vacío con un div que contiene la carátula del álbum y algunos detalles del álbum malicioso.

    El ul contiene una lista de canciones del álbum.

    El título de la canción, el artista, la duración y la "sincronización catty cloud" están contenidos en párrafos individuales dentro de la lista.

    Entonces, ¿qué vas a hacer con el estilo?

    ¿Ves lo que hice?

    En primer lugar, debe hacer que la sección .content sea un contenedor flexible.

    .contenido {
        pantalla: flex;
        flex: 1 1 auto; / * esto asegura que la sección crece para llenar todo el espacio disponible y también se reduce * /
        dirección flexible: columna;
    }

    También debe tratar con sus elementos flexibles:

    .music-head {
       flex: 0 0 280px; / * Misma nota, no crezca ni se encoja: quédese a 280 px * /
      pantalla: flex;
      acolchado: 40px;
      color de fondo: # 4e4e4e;
    }
    .music-list {
        flex: 1 0 auto;
        tipo-estilo-lista: ninguno;
        relleno: 5px 10px 0px;
    }

    .music-head contiene la carátula del álbum y otros detalles relacionados del álbum.

    Misma nota, no crezca ni se encoja, pero mantenga una altura de 280 px.

    ¿Altura? No ancho? ¡Sí!

    El elemento padre ya tenía la dirección de flexión conmutada.

    Oh, también necesitarás que esto sea un contenedor flexible más adelante. Así que muestra: flex

    .music-list contiene la lista de canciones y llena el espacio disponible restante compartido con .music-head arriba.

    Esto todavía no se siente muy bonito, pero vamos, que estás muy bien si sigues.

    Pulgares hacia arriba.

    música maliciosa sin terminar

    Hay algunos problemas aquí.

    1. La lista de canciones se ve terrible.
    lista de canciones

    2. La sección que contiene el arte musical tiene un texto realmente feo.

    Textos de arte musical de aspecto feo

    Nuevamente, lo guiaré para resolver estos problemas.

    A continuación se presentan las soluciones que propongo.

    Lidiando con la lista de canciones

    Cada lista de canciones contiene 4 párrafos. Título de la canción, artista, duración y "sincronización catty cloud".

    Tiene que haber una manera de poner todo esto en una línea con cada párrafo ocupando el mismo espacio a lo largo de esta línea.

    ¡Flexbox al rescate!

    El concepto aquí es el mismo empleado en muchos sistemas de red.

    Traduce eso al código.

    li {
      pantalla: flex; / * Los párrafos ahora se muestran en una línea * /
      relleno: 0 20px; / * Algún espacio de ruptura * /
      altura mínima: 50 px;
    }
    li p {
      flexión: 0 0 25%; / * Esta es la salsa dulce * /
    }

    ¿Ves lo que sucede allí con los párrafos?

    flexión: 0 0 25%;

    "No crezca ni se reduzca, pero cada párrafo debe ocupar el 25% del espacio disponible".

    El espacio se comparte por igual entre los párrafos.

    Usando esta técnica

    Esta técnica es invaluable. Puede usarlo para crear áreas de contenido desiguales. Digamos, una vista de 2 columnas.

    Una sección puede ocupar el 60% del espacio disponible, y la otra 40%

    primera sección: 0 0 60%;
    segunda sección: 0 0 40%;

    Puede usar esta técnica para hacer sistemas de cuadrícula.

    Así es como deberían verse las listas ahora.

    Lista de canciones arregladas

    Dé a las listas colores alternos, trate también con la etiqueta de "sincronización de la nube catty".

    li span.catty-cloud {
      borde: 1px negro sólido;
      tamaño de fuente: 0.6em;
      acolchado: 3px;
    }
    li: enésimo hijo (2n) {
      color de fondo: # f2f2f2;
    }

    Entonces, lo estás matando y realmente estás entendiendo mejor la jerga flexbox.

    Esto es lo que deberías tener ahora.

    Catty music - casi listo

    El segundo problema será tratado ahora.

    Hacer que el texto de detalles del álbum se vea más bonito.

    Cosas realmente simples que suceden a continuación.

    .catty-music {
      flex: 1 1 auto;
      pantalla: flex;
      dirección flexible: columna;
      peso de fuente: 300;
      color: #fff;
      relleno-izquierda: 50px;
    }
    .catty-music div: nth-child (1) {
      margen inferior: auto;
    }
    .catty-music div: nth-child (2) {
      margen superior: 0;
    }
    .catty-music div: nth-child (2) i.fa {
      tamaño de fuente: 0.9em;
      relleno: 0 0.7em;
      peso de fuente: 300;
    }
    .catty-music div: nth-child (1) p: first-child {
      tamaño de fuente: 1.8em;
      margen: 0 0 10px;
    }
    .catty-music div: nth-child (1) p: not (: first-child) {
      tamaño de fuente: 0.9em;
      margen: 2px 0;
    }

    y lo hiciste

    Ya casi terminaste.

    Los textos de arte musical se ven mucho mejor

    Un ejercicio rapido

    He guardado el pie de página para que trabajes como ejercicio.

    Intenta arreglar el pie de página tú mismo. Solo emplea las mismas técnicas. Puedes hacer esto, ¿sabes?

    Si te quedas atascado, siempre puedes consultar el código fuente completo de música maliciosa.

    También puede dividir todo el pie de página en elementos flexibles y comenzar desde allí.

    Pie de página explicado

    Guau. No puedo creer que hayas llegado a este punto. ¡Eso es genial! Te estás convirtiendo en un ninja Flexbox ahora.

    A continuación, verá cómo Flexbox ayuda con diseños receptivos.

    Diseño receptivo con Flexbox

    Se han escrito libros sobre diseño receptivo, buenos libros en eso.

    Dado que este artículo se centra en el modelo Flexbox, no me sumergiría profundamente en el estado general de los diseños receptivos.

    Como dije anteriormente en algún lugar, obtenemos cierta capacidad de respuesta con el modelo Flexbox.

    Flexbox como en "caja flexible".

    Sin embargo, es posible apuntar a varios tamaños de pantalla a través de consultas de medios y luego cambiar el comportamiento flexible.

    Aquí hay un ejemplo.

    La práctica lista desordenada viene al rescate nuevamente.

          
    • Inicio
    •     
    • Acerca de
    •     
    • Contacto
    •     
    • Registrarse
    •     
    • Iniciar sesión
    •   

    y con un poco de estilo ...

    ul {
            tipo-estilo-lista: ninguno;
            pantalla: flex;
            borde: 1px sólido # 4e4e4e;
        }
    li {
            flex: 0 0 auto;
            acolchado: 10px;
            margen: 10px;
            color de fondo: # 8cacea;
            color: #fff;
            tamaño de fuente: 1em;
        }

    Ahora eres un profesional en estas cosas flexibles, así que entiendes lo que está sucediendo allí.

    Así es como se ve la barra de navegación.

    Navegación Flexbox

    Si bien esto puede ser bueno para computadoras de escritorio y tabletas, en ciertos tamaños de pantalla particularmente no se ve bien.

    En dispositivos móviles, querrás apilar los elementos de navegación verticalmente.

    Luego viene en las consultas de los medios.

    @media screen y (max-width: 769px) {
    / * el código aquí solo se aplica a dispositivos de pantalla que tienen un ancho menor de 769px * /
        
         ul {
            dirección flexible: columna; / * En dispositivos más pequeños, cambie la dirección * /
        }
    }
    Barra de navegación para dispositivos móviles.

    Si sabía algunas cosas sobre diseños receptivos antes, eso es genial.

    Simplemente transponga el modelo Flexbox a su conocimiento actual y estará listo para comenzar.

    Por cierto, asumí que entiendes qué son las consultas de medios.

    Si no lo hace, vea el breve resumen a continuación.

    Preguntas de los medios

    Las consultas de los medios están en el corazón del diseño receptivo. Le permiten seleccionar tamaños de pantalla específicos y especificar códigos para que se ejecuten solo en los dispositivos.

    La forma más popular en la que se usan las consultas de medios es algo llamado la regla @media.

    Se parece a esto:

    @media screen y (max-width: 300px) {
      / * escribe tu CSS en este bloque de código * /
    }

    Mirándolo, casi puedes adivinar lo que eso hace.

    "Para un dispositivo de pantalla con un ancho máximo de 300 px ... haga esto y aquello"

    Cualquier estilo dentro del bloque de código solo se aplicará a los dispositivos que coincidan con la expresión, "pantalla y (ancho máximo: 300 px)"

    Supongo que eso ayudó a aclarar algo de confusión.

    Ejercicio rapido

    La música catty se muestra de manera diferente en los dispositivos móviles. Esas son buenas noticias. Lo que es aún mejor es que deberías intentar recrear esto.

    música catty móvil

    En caso de que se quede atascado, el enlace al repositorio de este tutorial se encuentra en la siguiente sección. La solución a esto también está en el repositorio.

    ¡Ya casi estás al final!

    En la sección final, hablaré sobre el soporte del navegador, enlaces útiles y recursos para que pueda moverse.

    Conclusión

    Aprendió a usar las propiedades de alineación de contenedor flexible y elemento flexible.

    Lo guié a través de una comprensión de la flexión absoluta y relativa, las alineaciones de margen automático y el cambio de dirección de flexión.

    También tuvo la oportunidad de aplicar sus "habilidades flexibles" para construir Catty Music y luego también toqué el diseño receptivo.

    Ha sido un viaje largo de hecho.

    Ahora, te explicaría algunos conceptos finales. Ayuda con recursos y enlaces. Creo que le resultará muy útil.

    ¿Cómo es el soporte del navegador para Flexbox?

    Esta es una pregunta común cuando se busca utilizar el modelo Flexbox en producción.

    No puedo responder la pregunta perfectamente, pero el sitio web de Caniuse hace justicia a esto.

    Aquí hay una captura de pantalla de caniuse, y el soporte del navegador es bastante impresionante. Puedes verlo por ti mismo aquí.

    Al principio de mi carrera, eché un vistazo a Caniuse muchas veces y aún no podía comprender lo que significaban los datos representados. Así que aquí hay una breve explicación.

    En la parte inferior derecha del sitio web de caniuse hay una leyenda.

    leyenda caniuse

    Eche un vistazo a la imagen de arriba o simplemente visite el sitio, encuentre la leyenda y estará listo para comenzar.

    Eso es todo lo que hay que hacer.

    Recursos adicionales

    Espero que encuentres estos útiles:

    1. Obtenga el artículo completo de Flexbox como documento PDF - enlace directo
    2. El curso interactivo de Flexbox
    3. Juega con el código de Catty Music en línea
    4. El repositorio para todo el tutorial "Comprender Flexbox"
    5. Flexbox Froggy: un juego genial de Flexbox

    Finalmente, debo decir gracias por seguirme.

    ¿Quieres ser profesional?

    Descargue mi hoja de trucos gratuita de CSS Grid y también obtenga dos cursos interactivos de calidad de Flexbox de forma gratuita.

    ¡Obtenga la hoja de trucos de la cuadrícula CSS gratuita + dos cursos de Flexbox de calidad gratis!

    Consíguelos ahora