Mesa de goma flex javascript css. flex es una abreviatura de las propiedades flex-grow, flex-shrink y flex-basis. Flex-contracción predeterminada: 1
Sobre lo fácil que es trabajar con Flexbox usando el ejemplo del diseño de una plantilla de sitio web de noticias.
Créame, no es necesario realizar un análisis detallado de todos los aspectos del trabajo con Flexbox si desea comenzar a usarlo ahora. En este tutorial, el autor le presentará algunas de las propiedades de Flexbox y creará un "diseño de noticias" como el que quizás haya visto en el sitio web de The Guardian.
La razón por la que el autor utiliza Flexbox es la gran cantidad de posibilidades que ofrece:
- facilidad para crear columnas adaptables;
- crear columnas misma altura;
- la capacidad de presionar el contenido hasta el fondo del recipiente.
Bueno, ¡vamos!
1. Comience creando dos columnas.
Creando columnas cuando ayuda CSS siempre ha entrañado ciertas dificultades. Durante mucho tiempo, los flotadores y/o tablas fueron (y son) ampliamente utilizados para realizar esta tarea, pero cada uno de estos métodos tenía (y tiene) sus inconvenientes.A su vez, Flexbox simplifica este proceso, teniendo una serie de ventajas como:
Escribir código más limpio: todo lo que tenemos que hacer es crear un contenedor con una regla pantalla: flexible;
- flexibilidad: podemos cambiar el tamaño, estirar y alinear columnas cambiando el par líneas CSS;
- marcado semántico;
- además, con usando flexbox No es necesario cancelar el ajuste para evitar un comportamiento impredecible del diseño.
Comencemos creando dos columnas, una de las cuales ocupará 2/3 del ancho de nuestro contenedor y la otra ocupará 1/3 del mismo.
Hay dos elementos aquí:
Recipiente columnas;
- dos elementos secundarios columna, uno de los cuales tiene clase adicional columna principal, que usaremos más adelante para ensanchar la columna.
Columnas ( mostrar: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Desde columna principal tiene un valor de flexión igual a 2
, entonces esta columna ocupará el doble de espacio que la segunda.
agreguemos un poco diseño visual y como resultado obtenemos:
Haga clic para ver en acción
2. Haga de cada columna un contenedor flexbox
Cada una de las dos columnas contendrá varios artículos dispuestos verticalmente, por lo que a partir de estos dos elementos nosotros, a su vez, también debemos hacer contenedores flexbox.Entonces, necesitamos los artículos:
Colocado verticalmente dentro de la columna del contenedor;
- ocupó todo el espacio disponible.
Regla dirección flexible: columna especificado para el contenedor, junto con la regla flexión: 1 especificado para el elemento secundario permite que el artículo llene todo espacio libre verticalmente, mientras que la altura de las dos primeras columnas permanecerá sin cambios.
Haga clic para ver en acción
3. Hacer un contenedor a partir de un artículo.
Ahora, para ampliar aún más nuestras capacidades, representemos cada artículo como un contenedor flexbox. Cada uno de estos contenedores contendrá:Título;
- párrafo;
- panel informativo con el nombre del autor y número de comentarios;
- una especie de imagen adaptativa.
Aquí usamos Flexbox para empujar la barra de información hacia la parte inferior del elemento. Aquí, mire el resultado que esperamos obtener.
Y aquí está el código en sí:
.article ( display: flex; flex-direction: column; flex-basis: auto; /* Establece el tamaño inicial del elemento dependiendo de su contenido */ ) .article-body ( display: flex; flex: 1; flex- dirección: columna; ) .article-content ( flex: 1; /* El contenido llena el espacio restante, empujando así la barra de información hacia la parte inferior */ )
Los elementos del interior del artículo están dispuestos verticalmente gracias al uso de una regla. dirección flexible: columna.
También aplicamos la propiedad. flexión: 1 al elemento contenido del artículo, estirándolo así a todo el espacio disponible y presionando información del artículo hasta el fondo. La altura de las columnas en este caso no importa.
Haga clic para ver en acción
4. Agregue varias columnas anidadas
De hecho, necesitamos que la columna de la izquierda incluya varias columnas más. Por tanto, necesitamos sustituir el segundo elemento responsable del artículo por un contenedor. columnas, que usamos antes.
Como queremos que la primera columna anidada sea más ancha, agregaremos la clase al elemento columna anidada, y en CSS indicamos:
Columna anidada ( flex: 2; )
Ahora esta columna será el doble de ancha que la segunda.
Haga clic para ver en acción
5. Realizar el primer artículo con un diseño horizontal.
Nuestro primer artículo es realmente extenso. Para utilizar eficazmente el espacio en la pantalla del monitor, cambiemos su orientación a horizontal.Primer artículo (dirección flexible: fila;) .primer artículo .cuerpo del artículo (flex: 1;) .primer artículo .imagen del artículo (alto: 300 px; orden: 2; relleno superior: 0; ancho: 400px)
Propiedad orden V en este caso juega un papel importante porque le permite cambiar el orden de los elementos HTML sin cambiar el marcado HTML. En realidad, imagen-articulo V el código va antes del elemento cuerpo del artículo, pero actúa como si estuviera detrás de él.
Haga clic para ver en acción
6. Hacer un diseño adaptable
Ahora todo luce como queríamos, aunque un poco aplastado. Arreglemos esto agregando flexibilidad a nuestro diseño.Una de las mejores cosas de Flexbox es que puedes simplemente eliminar una regla pantalla:flexible en el contenedor para deshabilitarlo por completo (Flexbox), mientras que el resto de sus propiedades (como alinear elementos o doblar) seguirá funcionando.
Como resultado, podemos activar el diseño adaptativo usando Flexbox solo cuando sea necesario.
Entonces vamos a eliminar pantalla:flexible de selectores .columnas Y .columna, en lugar de "empaquetarlos" en una consulta de medios:
@media pantalla y (ancho mínimo: 800px) (.columns, .column (display: flex;))
¡Eso es todo! En pantallas de baja resolución, todos los artículos se ubicarán uno encima del otro, y en pantallas con una resolución de más de 800 píxeles, en dos columnas.
7. Agregar toques finales
Para que el diseño parezca más atractivo en pantallas grandes, agreguemos algunos ajustes de CSS:@media pantalla y (ancho mínimo: 1000 px) ( .primer artículo (dirección flexible: fila;) .primer artículo. cuerpo del artículo (flex: 1;) .primer artículo. imagen-artículo (altura: 300 px) ; orden: 2; relleno superior: 0; ancho: 400px; columna principal (flex: 3; columna anidada (flex: 2;)
El contenido del primer artículo está alineado horizontalmente: el texto está en el lado izquierdo y la imagen en el derecho. Además, la columna principal ahora es más ancha (75%). Lo mismo ocurre con la columna anidada (66%).
¡Y aquí está el resultado final!
Haga clic para ver en acción
Conclusión
Ahora puedes comprobar por ti mismo que puedes utilizar Flexbox en tus proyectos sin siquiera profundizar en todos sus entresijos, y el diseño creado es un claro ejemplo de ello. Al menos eso es lo que el autor realmente espera.caja flexible CSS (Módulo de diseño de caja flexible)- módulo de diseño de contenedor flexible - es una forma de organizar elementos, basada en la idea de un eje.
Flexbox consta de contenedor flexible Y artículos flexibles. Los elementos flexibles se pueden organizar en una fila o columna, y el espacio libre restante se distribuye entre ellos de varias maneras.
El módulo flexbox le permite resolver las siguientes tareas:
- Organice los elementos en una de cuatro direcciones: de izquierda a derecha, de derecha a izquierda, de arriba a abajo o de abajo a arriba.
- Anula el orden de visualización de los elementos.
- Determinar automáticamente las dimensiones de los elementos para que encajen en espacio disponible.
- Resuelva el problema con centrado horizontal y vertical.
- Mueve artículos dentro de un contenedor sin desbordarlo.
- Crea columnas de la misma altura.
- Crear presionado al final de la página.
Flexbox resuelve problemas específicos: creando diseños unidimensionales, por ejemplo, barra de navegación, ya que los elementos flexibles solo se pueden colocar a lo largo de uno de los ejes.
¿Qué es la caja flexible?
Soporte del navegador
ES DECIR: 11,0, 10,0 -ms-
Firefox: 28.0, 18.0 -moz-
Cromo: 29.0, 21.0 -webkit-
Safari: 6.1 -kit web-
Ópera: 12.1 -kit web-
iOSSafari: 7.0 -kit web-
Ópera Mini: 8
Navegador de Android: 4.4, 4.1 -kit web-
Cromo para Android: 44
1. Conceptos básicos
Arroz. 1. Modelo de caja flexible
Se utiliza un conjunto específico de términos para describir un módulo Flexbox. El valor del flujo flexible y el modo de registro determinan la correspondencia de estos términos con las direcciones físicas: arriba / derecha / abajo / izquierda, ejes: vertical / horizontal y dimensiones: ancho / alto.
Eje principal— el eje a lo largo del cual se disponen los elementos flexibles. Se extiende hasta la dimensión principal.
Inicio principal y final principal.— líneas que definen los lados inicial y final del contenedor flexible, con respecto a las cuales se disponen los elementos flexibles (comenzando desde el inicio principal hacia el final principal).
Tamaño principal) - el ancho o alto del contenedor flexible o del artículo flexible, dependiendo de cuál de ellos esté en la dimensión principal, determina el tamaño principal del contenedor flexible o del artículo flexible.
Eje transversal- eje perpendicular al eje principal. Se extiende en la dimensión transversal.
Inicio cruzado y final cruzado— líneas que definen los lados inicial y final del eje transversal, respecto del cual se disponen los elementos flexibles.
Tamaño cruzado— el ancho o alto de un contenedor flexible o de artículos flexibles, cualquiera que esté en la dimensión transversal, es su dimensión transversal.
Arroz. 2. Modo de fila y columna
2. Contenedor flexible
Un contenedor Flex establece un nuevo contexto de formato flexible para su contenido. Un contenedor flexible no es un contenedor de bloques, por lo que las propiedades CSS como float, clear y vertical-align no funcionan para elementos secundarios. Además, el contenedor flexible no se ve afectado por las propiedades column-* que crean columnas en el texto y los pseudoelementos::first-line y::first-letter .
El modelo de diseño de flexbox está asociado con un cierto valor CSS- propiedades de visualización elemento html principal que contiene bloques secundarios en su interior. Para controlar elementos usando este modelo, debe configurar la propiedad de visualización de la siguiente manera:
Flex-container ( /*genera un contenedor flexible a nivel de bloque*/ display: -webkit-flex; display: flex; ) .flex-container ( /*genera un contenedor flexible a nivel de línea*/ display: -webkit-inline- flex; pantalla: inline-flex)
Después de establecer estos valores de propiedad, cada elemento secundario se convierte automáticamente en un elemento flexible, alineándose en una fila (a lo largo del eje principal). En este caso, los elementos secundarios en bloque y en línea se comportan igual, es decir, El ancho de los bloques es igual al ancho de su contenido, teniendo en cuenta los márgenes y bordes internos del elemento.
Arroz. 3. Alinear elementos en el modelo flexboxSi el bloque principal contiene texto o imágenes sin envoltorios, se convierten en elementos flexibles anónimos. El texto se alinea con el borde superior del bloque contenedor y la altura de la imagen se vuelve igual a la altura del bloque, es decir. está deformado.
3. Elementos flexibles
Los elementos flexibles son bloques que representan el contenido de un contenedor flexible en un flujo. El contenedor Flex establece un nuevo contexto de formato para su contenido, lo que provoca las siguientes características:
- Para elementos flexibles, el valor de su propiedad de visualización está bloqueado. valor de visualización: bloque en línea; y mostrar: tabla-celda; evaluado en pantalla: bloque; .
- El espacio en blanco entre elementos desaparece: no se convierte en su propio elemento flexible, incluso si el texto entre elementos está incluido en un elemento flexible anónimo. No se puede configurar el contenido de un elemento flexible anónimo estilos propios, pero los heredará (por ejemplo, opciones de fuente) del contenedor flexible.
- Un elemento flexible absolutamente posicionado no participa en el diseño del diseño flexible.
- Los márgenes de los elementos flexibles adyacentes no colapsan.
- Los valores de margen y porcentaje de relleno se calculan a partir de tamaño interno bloque que los contiene.
- margen: automático; expandirse, absorbiendo espacio adicional en la dimensión correspondiente. Se pueden utilizar para alinear o empujar elementos flexibles adyacentes.
- Auto tamaño mínimo Los elementos flexibles tienen por defecto el tamaño mínimo de su contenido, es decir, min-width: auto; . Para los contenedores desplazables, el tamaño mínimo automático suele ser cero.
4. Orden y orientación de visualización de elementos flexibles
El contenido de un contenedor flexible se puede distribuir en cualquier dirección y en cualquier orden (reorganizar los elementos flexibles dentro del contenedor solo afecta la representación visual).
4.1. Dirección del eje principal: dirección flexible
La propiedad se refiere al contenedor flexible. Controla la dirección del eje principal a lo largo del cual se apilan los elementos flexibles, de acuerdo con el modo de escritura actual. No heredado.
dirección flexible | |
---|---|
Valores: | |
fila | El valor predeterminado es de izquierda a derecha (en rtl, de derecha a izquierda). Los elementos flexibles están dispuestos en fila. El inicio (principal-inicio) y el final (principal-final) de la dirección del eje principal corresponden al inicio (inicio-en línea) y el final (fin-en línea) del eje en línea. |
fila inversa | La dirección es de derecha a izquierda (en rtl de izquierda a derecha). Los elementos flexibles se colocan en una línea con respecto al borde derecho del contenedor (en rtl, el izquierdo). |
columna | Dirección de arriba a abajo. Los elementos flexibles se disponen en una columna. |
columna-inversa | Una columna con elementos en orden inverso, de abajo hacia arriba. |
inicial | |
heredar |
Arroz. 4. Propiedad de dirección flexible para idiomas de izquierda a derecha
Sintaxis
Contenedor flexible (pantalla: -webkit-flex; -webkit-flex-direction: fila-reversa; pantalla: flex; flex-direction: fila-reversa;)
4.2. Gestión de contenedores flexibles multilínea: flex-wrap
La propiedad determina si el contenedor flexible será de una o varias líneas y también establece la dirección del eje transversal, que determina la dirección en la que se colocarán las nuevas líneas del contenedor flexible.
De forma predeterminada, los elementos flexibles se apilan en una línea, a lo largo del eje principal. Si se desbordan, se extenderán más allá del cuadro delimitador del contenedor flexible. La propiedad no se hereda.
Arroz. 5. Control multilínea utilizando la propiedad flex-wrap para idiomas LTR
Sintaxis
Contenedor flexible (pantalla: -webkit-flex; -webkit-flex-wrap: envoltura; pantalla: flex; flex-wrap: envoltura;)
4.3. Un breve resumen de dirección y multilínea: flujo flexible
La propiedad le permite definir las direcciones de los ejes principal y transversal, así como la capacidad de mover elementos flexibles, si es necesario, en varias líneas. Esta es una abreviatura de las propiedades de dirección flexible y envoltura flexible. Valor predeterminado flex-flow: fila nowrap; . la propiedad no se hereda.
Sintaxis
Contenedor flexible (pantalla: -webkit-flex; -webkit-flex-flow: ajuste de fila; pantalla: flex; flujo flexible: ajuste de fila;)
4.4. Orden de visualización de elementos flexibles: orden
La propiedad define el orden en el que se muestran y organizan los elementos flexibles dentro de un contenedor flexible. Aplica para artículos flexibles. La propiedad no se hereda.
Inicialmente todos los elementos flexibles tienen orden: 0; . Cuando especifica un valor de -1 para un elemento, se mueve al principio de la línea de tiempo y un valor de 1 se mueve al final. Si varios elementos flexibles tienen el mismo valor de pedido, se representarán según el orden original.
Sintaxis
Contenedor flexible ( pantalla: -webkit-flex; pantalla: flex; ) .flex-item ( -webkit-order: 1; orden: 1; )
Arroz. 6. Mostrar orden de elementos flexibles
5. Flexibilidad de los elementos flexibles.
El aspecto definitorio de un diseño flexible es la capacidad de "flexionar" elementos flexibles, cambiando su ancho/alto (dependiendo del tamaño que esté en el eje principal) para llenar el espacio disponible en la dimensión principal. Esto se hace usando la propiedad flex. Un contenedor flexible distribuye espacio libre entre sus hijos (proporcional a su proporción de crecimiento flexible) para llenar el contenedor, o los encoge (proporcional a su proporción de contracción flexible) para evitar el desbordamiento.
Un elemento flexible será completamente "inflexible" si sus valores de crecimiento flexible y contracción flexible son cero, y "flexible" en caso contrario.
5.1. Establecer dimensiones flexibles con una propiedad: flex
La propiedad es una abreviatura de las propiedades flex-grow, flex-shrink y flex-basis. Valor predeterminado: flex: 0 1 auto; . Puede especificar uno o los tres valores de propiedad. La propiedad no se hereda.
Sintaxis
Contenedor flexible ( pantalla: -webkit-flex; pantalla: flex; ) .flex-item ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; )
5.2. Factor de crecimiento: crecimiento flexible
La propiedad determina la tasa de crecimiento de un elemento flexible en relación con otros elementos flexibles en el contenedor flexible al distribuir el espacio libre positivo. Si la suma de los valores de crecimiento flexible de los elementos flexibles en una fila es menor que 1, ocupan menos del 100% del espacio libre. La propiedad no se hereda.
Arroz. 7. Administre el espacio de la barra de navegación con Flex-GrowSintaxis
Contenedor flexible ( pantalla: -webkit-flex; pantalla: flex; ) .flex-item ( -webkit-flex-grow: 3; flex-grow: 3; )
5.3. Relación de compresión: flex-shrink
La propiedad especifica la relación de compresión de un elemento flexible en relación con otros elementos flexibles al distribuir el espacio libre negativo. Multiplicado por el tamaño de la base flexible. El espacio negativo se asigna en proporción a cuánto se puede reducir el elemento, por lo que, por ejemplo, un elemento flexible pequeño no se reducirá a cero hasta que un elemento flexible más grande se reduzca notablemente. La propiedad no se hereda.
Arroz. 8. Reducir los elementos flexibles seguidos
Sintaxis
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex;) .flex-item (-webkit-flex-shrink: 3; flex-shrink: 3;)
5.4. Tamaño básico: base flexible
La propiedad establece el tamaño base inicial de un elemento flexible antes de asignar espacio libre según los factores flexibles. Para todos los valores, excepto auto y content, el tamaño de flexión base se define igual que el ancho en los modos de escritura horizontal. Los valores porcentuales se definen en relación con el tamaño del contenedor flexible y, si no se especifica ningún tamaño, el valor utilizado para flex-basis son las dimensiones de su contenido. No heredado.
Sintaxis
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex;) .flex-item (-webkit-flex-basis: 100px; flex-basis: 100px;)
6. Alineación
6.1. Alineación del eje principal: justificar contenido
La propiedad alinea los elementos flexibles a lo largo del eje principal del contenedor flexible, distribuyendo el espacio libre desocupado por los elementos flexibles. Cuando un elemento se convierte en un contenedor flexible, los elementos flexibles se agrupan de forma predeterminada (a menos que estén configurados en campos de margen). Los espacios se agregan después de calcular los valores de margen y crecimiento flexible. Si algún elemento tiene un margen o crecimiento flexible distinto de cero: auto; , la propiedad no tendrá ningún efecto. La propiedad no se hereda.
Valores: | |
inicio flexible | Valor predeterminado. Los elementos flexibles se disponen en una dirección que comienza desde la línea inicial del contenedor flexible. |
extremo flexible | Los artículos flexibles se colocan en la dirección desde la línea final del contenedor flexible. |
centro | Los elementos flexibles están alineados con el centro del contenedor flexible. |
espacio entre | Los elementos flexibles se distribuyen uniformemente a lo largo de la línea. El primer elemento flexible se coloca al ras con el borde de la línea de inicio, el último elemento flexible se coloca al ras con el borde de la línea final y los elementos flexibles restantes en la línea se espacian de modo que la distancia entre dos elementos adyacentes cualesquiera sea lo mismo. Si el espacio libre restante es negativo o solo hay un elemento flexible por línea, este valor es idéntico al parámetro flex-start. |
espacio alrededor | Los elementos flexibles en la línea se distribuyen de modo que la distancia entre dos elementos flexibles adyacentes sea la misma, y la distancia entre el primer/último elemento flexible y los bordes del contenedor flexible sea la mitad de la distancia entre los elementos flexibles. |
inicial | Establece el valor de la propiedad en el valor predeterminado. |
heredar | Hereda el valor de la propiedad del elemento padre. |
Arroz. 9. Alinear elementos y distribuir espacio libre usando la propiedad justify-content
Sintaxis
Contenedor flexible (pantalla: -webkit-flex; -webkit-justify-content: flex-start; pantalla: flex; justify-content: flex-start;)
6.2. Alineación del eje transversal: align-items y align-self
Los elementos flexibles se pueden alinear a lo largo del eje transversal de la línea actual del contenedor flexible. align-items establece la alineación para todos los elementos del contenedor flexible, incluidos los elementos flexibles anónimos. align-self le permite anular esta alineación para elementos flexibles individuales. Si alguno de los márgenes transversales del elemento flexible está configurado en auto , align-self no tiene ningún efecto.
6.2.1. Alinear elementos
La propiedad alinea elementos flexibles, incluidos elementos flexibles anónimos, a lo largo del eje transversal. No heredado.
Valores: | |
inicio flexible | |
extremo flexible | |
centro | |
base | Las líneas de base de todos los elementos flexibles involucrados en la alineación son las mismas. |
estirar | |
inicial | Establece el valor de la propiedad en el valor predeterminado. |
heredar | Hereda el valor de la propiedad del elemento padre. |
Sintaxis
Contenedor flexible (pantalla: -webkit-flex; -webkit-align-items: flex-start; pantalla: flex; align-items: flex-start;)
6.2.2. Alinearse
La propiedad es responsable de alinear un único elemento flexible con la altura del contenedor flexible. Anula la alineación especificada por align-items . No heredado.
Valores: | |
auto | Valor predeterminado. Un elemento flexible utiliza la alineación especificada en la propiedad align-items del contenedor flexible. |
inicio flexible | El borde superior del elemento flexible se coloca cerca de la línea flexible (o a una distancia, teniendo en cuenta el margen especificado y borde del marco elemento) que pasa por el inicio del eje transversal. |
extremo flexible | El borde inferior del elemento flexible se coloca adyacente a la línea flexible (o a una distancia, teniendo en cuenta los márgenes y bordes especificados del elemento) que pasa por el extremo del eje transversal. |
centro | El margen de un elemento flexible está centrado a lo largo del eje transversal dentro de la línea flexible. |
base | El elemento flexible está alineado con la línea de base. |
estirar | Si el tamaño cruzado de un elemento flexible es automático y ninguno de los valores de margen cruzado es automático, el elemento se estira. Valor predeterminado. |
inicial | Establece el valor de la propiedad en el valor predeterminado. |
heredar | Hereda el valor de la propiedad del elemento padre. |
Arroz. 11. Alinear elementos flexibles individuales
Sintaxis
Contenedor flexible ( pantalla: -webkit-flex; pantalla: flex; ) .flex-item ( -webkit-align-self: centro; align-self: centro; )
6.3. Alinear las líneas de un contenedor flexible: align-content
La propiedad alinea líneas en un contenedor flexible si está presente espacio extra en el eje transversal, similar a la alineación elementos individuales en el eje principal usando la propiedad justify-content. La propiedad no afecta a un contenedor flexible de una sola línea. No heredado.
Valores: | |
inicio flexible | Las filas se apilan hacia el comienzo del contenedor flexible. El borde de la primera línea se coloca cerca del borde del contenedor flexible, cada línea posterior se coloca cerca de la línea anterior. |
extremo flexible | Las filas se apilan hacia el final del contenedor flexible. El borde de la última línea se coloca cerca del borde del contenedor flexible, cada línea anterior se coloca cerca de la siguiente. |
centro | Las filas se apilan hacia el centro del contenedor flexible. Las filas están muy juntas y alineadas con el centro del contenedor flexible, con la misma distancia entre el borde inicial del contenido del contenedor flexible y la primera fila, y entre el borde final del contenido del contenedor flexible y la última fila. |
espacio entre | Las filas están distribuidas uniformemente en el contenedor flexible. Si el espacio libre restante es negativo o solo hay una línea flexible en el contenedor flexible, este valor es idéntico a flex-start. De lo contrario, el borde de la primera línea se coloca cerca del borde inicial del contenido del contenedor flexible y el borde de la última línea se coloca cerca del borde final del contenido del contenedor flexible. Las líneas restantes se distribuyen de modo que la distancia entre dos líneas adyacentes sea la misma. |
espacio alrededor | Las líneas están espaciadas uniformemente en el contenedor flexible con medio espacio en ambos extremos. Si el espacio libre restante es negativo, este valor es idéntico al centro centro. De lo contrario, las líneas se distribuyen de modo que el espacio entre dos líneas adyacentes sea el mismo y la distancia entre la primera/última línea y los bordes del contenido del contenedor flexible sea la mitad de la distancia entre las líneas. |
estirar | Valor predeterminado. Las filas de elementos flexibles se estiran uniformemente para llenar todo el espacio disponible. Si el espacio libre restante es negativo, este valor es idéntico a flex-start. De lo contrario, el espacio libre se dividirá equitativamente entre todas las filas, aumentando su tamaño lateral. |
inicial | Establece el valor de la propiedad en el valor predeterminado. |
heredar | Hereda el valor de la propiedad del elemento padre. |
Sintaxis
Contenedor flexible (pantalla: -webkit-flex; -webkit-flex-flow: ajuste de fila; -webkit-align-content: extremo flexible; pantalla: flex; flujo flexible: ajuste de fila; contenido de alineación: extremo flexible ; altura: 100 píxeles)
¿Por qué Flexbox?
Durante mucho tiempo, las únicas herramientas confiables compatibles con varios navegadores disponibles para crear diseños CSS fueron elementos como flotadores y posicionamiento. Están bien y funcionan, pero en cierto modo también son bastante limitantes y frustrantes.
Los siguientes requisitos de diseño simples son difíciles o imposibles de lograr con tales herramientas, de cualquier manera conveniente y flexible:
- Centrar verticalmente un bloque de contenido dentro de su padre.
- Hacer que todos los elementos secundarios de un contenedor ocupen la misma cantidad del ancho/alto disponible, independientemente de cuánto ancho/alto esté disponible.
- Hacer que todas las columnas en un diseño de varias columnas adopten la misma altura incluso si contienen una cantidad diferente de contenido.
Como verá en las secciones siguientes, flexbox facilita mucho muchas tareas de diseño. ¡Vamos a profundizar!
Presentamos un ejemplo simple
En este artículo, le ayudaremos a realizar una serie de ejercicios para ayudarle a comprender cómo funciona Flexbox. Para comenzar, debe hacer una copia local del primer archivo de inicio, flexbox0.html de nuestro repositorio de github, cargarlo en un navegador moderno (como Firefox o Chrome) y echar un vistazo al código en su editor de código. Tú también puedes.
Dirección flexible: columna;
Verá que esto coloca los elementos nuevamente en un diseño de columnas, muy parecido a como estaban antes de agregar CSS. Antes de continuar, elimine esta declaración de su ejemplo.
Nota: También puede diseñar elementos flexibles en dirección inversa utilizando los valores de inversión de fila y de columna. ¡Experimenta también con estos valores!
Envase
Un problema que surge cuando tienes una cantidad fija de ancho o alto en tu diseño es que eventualmente tus hijos de flexbox desbordarán su contenedor, rompiendo el diseño. Eche un vistazo a nuestro ejemplo flexbox-wrap0.html e intente verlo en vivo (haga una copia local de este archivo ahora si desea seguir este ejemplo):
Aquí vemos que los niños efectivamente están saliendo de su contenedor. Una forma de solucionar este problema es agregar la siguiente La declaración de su elemento representa una sección independiente, que no tiene un elemento semántico más específico para representarla contenida en un documento html.>
Envoltura flexible: envoltura;
flexionar: 200px;
Pruebe esto ahora; Verás que el diseño luce mucho mejor con esto incluido:
Ahora tenemos varias filas: se colocan tantos hijos de Flexbox en cada fila como sea posible, y cualquier desbordamiento se mueve a la siguiente línea. La declaración flex: 200px establecida en los artículos significa que cada uno tendrá al menos 200px de ancho; Analizaremos esta propiedad con más detalle más adelante. También puede notar que los últimos elementos secundarios de la última fila se ensanchan para que toda la fila aún esté llena.
Pero hay más que podemos hacer aquí. En primer lugar, intente cambiar el valor de su propiedad flex-direction a row-reverse - ahora verá que todavía tiene su diseño de múltiples filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye en sentido inverso.
taquigrafía de flujo flexible
En este punto vale la pena señalar que existe una abreviatura para flex-direction y flex-wrap - flex-flow. Entonces, por ejemplo, puedes reemplazar
Dirección flexible: fila; envoltura flexible: envoltura;
Flujo flexible: envoltura de hileras;
Tamaño flexible de artículos flexibles
Volvamos ahora a nuestro primer ejemplo y veamos cómo podemos controlar qué proporción de espacio ocupan los elementos flexibles. Inicie su copia local de flexbox0.html o tome una copia de flexbox1.html como nuevo punto de partida (verlo). vivir).
Primero, agregue la siguiente regla al final de su CSS:
Ahora agregue la siguiente regla debajo de la anterior:
Artículo: enésimo tipo (3) (flex: 2;)
Sección - artículo artículo artículo - div - botón botón div botón div botón botón
Veamos el código que hemos utilizado para el diseño.
Resumen
Con esto concluye nuestro recorrido por los conceptos básicos de flexbox. Esperamos que te hayas divertido y que disfrutes jugando mientras avanzas en tu aprendizaje. A continuación veremos otro aspecto importante de los diseños CSS: las cuadrículas CSS.
Un desarrollador front-end moderno debe poder poner en práctica activamente varias herramientas que permitan automatizar el proceso de diseño y programación del componente cliente del proyecto. Para ello, ya existen muchos frameworks, grandes y pequeños, sistemas de compilación, administradores de paquetes, un montón de paquetes para tareas de cualquier nivel, preprocesadores, motores de plantillas y otros "azúcar" que se crearon para simplificar y aumentar la productividad. de un especialista en este campo.
Desafortunadamente, puede resultar difícil para los principiantes comprender la abundancia de estas herramientas, ya que necesitan desarrollar y conocer constantemente los conceptos básicos del diseño. Y por esta razón, mucha gente continúa creando el diseño antiguo, CSS normal, con un montón de selectores repetibles, diseño sin comprender el principio de varias cuadrículas, dolores de cabeza salvajes con varios tipos de centrado, etc.
Si antes, hace un millón de años, se presentaban en tablas y luego se trasladaban a divs, pero ahora, sin usar flexbox en combinación con cuadrículas o un marco CSS ya preparado, siento que pronto se considerará incluso un diseño simple en divs. "malas maneras". Este no es el caso todavía, pero hasta donde observo (o mejor dicho, ni siquiera tengo tiempo para observar) el desarrollo de varios métodos y mejores prácticas en esta área, lo más probable es que esta opción se esté implementando.
Por supuesto, en esta pequeña nota no podré considerar todas las habilidades imprescindibles de un buen frente y herramientas para un trabajo cómodo, pero sí mostraré y comentaré algunos principios básicos que te permitirán empezar y seguir adelante. con ejemplos.
Diseño adaptativo
Comencemos con el diseño adaptativo, ya que es un tema muy popular debido al rápido desarrollo del tráfico móvil. Para comprender cómo funcionan las distintas grillas, y por tanto adaptativas, echemos un vistazo a los elementos de bloque que componen el diseño de la página y actúan al mismo tiempo como contenedores de otros elementos (texto, iconos, imágenes, etc., que se puede colocar por defecto o mediante posicionamiento). Diseño tradicional en divs.
Como sabes, cualquier elemento de bloque display: block ocupa por defecto todo el ancho de pantalla disponible, a menos que definamos explícitamente su ancho (ya sea en px o %). Pero incluso si se le da un ancho definido de esta manera, el elemento de bloque que le sigue lo seguirá en una nueva línea (esto, por cierto, es lo que distingue el bloque del elemento en línea, que se sucederán entre sí). Este es un punto importante, solo necesita comprenderlo y, para comprenderlo, este asunto se puede ver fácilmente en el inspector de cualquier navegador.
Si necesitamos que los elementos del bloque sean adyacentes entre sí, entonces debemos envolver los elementos (flotantes) y debemos establecer el ancho de los bloques en% para que el navegador calcule automáticamente el ancho en píxeles. Un ejemplo común es un bloque de contenido con una barra lateral al lado. Después de envolver elementos, recuerde usar clearfix, restableciendo el envoltorio, para no romper el diseño en el futuro.
Lo primero que debemos hacer es "notificar" al navegador que queremos usar una vista responsiva, según la cual cualquier navegador abrirá la página en este modo, esto se hace con esta declaración entre las etiquetas principales del documento:
Meta nombre="viewport" content="ancho=ancho del dispositivo, escala inicial=1"
En otras palabras, el ancho del dispositivo está en una escala de 1:1. Y si su diseño no es adaptable, lo más probable es que surjan problemas con dicha visualización en la vista móvil (lo más probable es que todo el contenido se comprima en un "acordeón", si es lógico imaginar lo que podría pasar :). A partir de ahora ya podemos hablar del siguiente paso, que está presente en cualquier sistema grid o marco adaptativo.
Cualquier sistema de cuadrícula tiene puntos de interrupción, puntos de transición. Veamos Bootstrap, cuando cuando cambia el ancho de la pantalla (vista móvil, tableta, etc.), se marca el elemento que tiene la clase de columna actual (por ejemplo, la clase de escritorio para una columna, en el popular framework Bootstrap, es col -md-(x), md - escritorio). Las clases, a su vez, especifican un ancho diferente en % igual a (100/12) x, donde x es el factor de ancho, de 1 a 12.
Las clases de columnas describen el comportamiento de los elementos de ajuste: si hay una clase (al mismo tiempo, la clase puede ser para diferentes dispositivos), el ajuste está configurado, si no, el ancho es del 100% (típico para presentar contenido en dispositivos móviles ). Y este comportamiento se implementa mediante consultas de medios que todos los navegadores comprenden. Consulta de medios: en CSS este concepto significa una regla, cuando se cumplen las condiciones, los estilos correspondientes se conectan, por ejemplo, el ancho se ha vuelto inferior a 600 px; conectamos un nuevo bloque de estilos que anula el anterior. Por ejemplo, la clase de columna col-md-(x) está habilitada de forma predeterminada desde 992 px y superior, y deshabilitada hasta 992 px. Pero todos los puntos de interrupción de arranque predeterminados pueden ser anulados por usted mismo al compilar la cuadrícula.
Esa es toda la mecánica simple con divs a los que se les debe dar un ancho en %, float:left; y borre el envoltorio después de las columnas (en bootstrap, las columnas están envueltas en un envoltorio con la clase de fila en este caso), que alineamos en una fila. Puedes implementar todo esto fácilmente tú mismo y sin ningún grid, cuando tengas una idea de cómo funciona, las clases simplemente se escriben en cualquier grid y ya se ha escrito mucho código, tu tarea sigue siendo asignar clases a elementos, eso es todo.
Iremos un poco más allá y consideraremos otra opción. Usando Flexbox, al mismo tiempo, en la práctica, crearemos un pequeño esqueleto de una página adaptable usando esta nueva tecnología de diseño. En general, a grandes rasgos, los flexos nos permiten ahorrarnos quebraderos de cabeza como el centrado, la alineación horizontal y vertical en un contenedor. Y junto con las consultas de medios, teniendo en cuenta la mecánica descrita anteriormente, puede crear una plantilla adaptativa de muy alta calidad con cualquier alineación, tanto vertical como horizontal. Jugamos, en general, como queremos.
Aquí me gustaría señalar que el ancho especificado en %, como en el caso del área de contenido y la barra lateral (el encabezado y pie de página ocupan de forma predeterminada todo el ancho, 100%), se recalcula automáticamente inmediatamente al cambiar el tamaño (o abrir la página). en una pantalla pequeña). Esta es quizás la regla principal: configurar todo en %, el navegador hará el resto por sí mismo.
Por ahora solo tengamos texto en los divs, practiquemos alinear el texto (horizontal/verticalmente). Otra buena práctica es excluir el pie de página del contenedor general, establecer html y cuerpo, altura: 100%, en el contenedor: min-height: 100%, para que el pie de página siempre esté presionado en la parte inferior de la página.
Estoy acostumbrado a usar scss, aquí hay una lista de códigos para ello:
$gris: #808080; $h: 50px; html, cuerpo (margen: 0; altura: 100%;) cuerpo (fuente-familia: monoespacio, sans-serif; transformación de texto: mayúsculas;) .row (pantalla: flex;) .vertical-center (alinear-elementos: centro; justificar-contenido: centro; ) .wrap ( altura mínima: 100%; encabezado, .content, .sidebar ( borde: 1px sólido $ gris; ) encabezado ( altura: $h; ) .content ( altura: 100px; relleno: 15px 15px 0 15px; margen derecho: 1%; ancho: 75%; alto: 120px; pie de página (alto: $ h; borde: 1px sólido $gris;
pantalla: flexible; - en contexto flexible; propiedad dirección flexible: fila; - de forma predeterminada, a menos que especifiquemos la columna explícitamente. Esto es lo que nos permite hacer muchas cosas increíbles. No estoy del todo seguro, pero parece que caniuse no admite esta propiedad en todas partes, pero es hora de desechar todos estos navegadores antiguos e instalar los modernos, ¿verdad? :)
También establecemos la proporción para el ancho del contenido: barra lateral, 75%: 25%. Se habría logrado el mismo efecto si se hubiera utilizado bootstrap. Solo con las clases col-md-9 para contenido ((100/12 · 9)% - ancho como porcentaje, 75) y col-md-3 para la barra lateral ((100/12 · 3)% - ancho como porcentaje , 25)
Entonces, comprendamos qué está pasando y cómo funciona Flexbox. Lo primero es configurar display:flex en el contenedor en el que necesitamos centrarnos, por ejemplo. En el marcado tengo un encabezado, un pie de página y un contenedor, dentro del cual hay contenido y una barra lateral. Lo más simple que Flexbox hace efectivamente aquí es simplemente tomar y alinear el texto que está en el encabezado y pie de página usando la clase .vertical-center:
.vertical-center (alinear-elementos: centro; // alinear al centro, vertical justificar-contenido: centro; // alinear al centro, horizontal)
Como resultado, el texto se alinea en dos direcciones, en el encabezado y en el pie de página. La parte central permaneció, aquí, si no hubiéramos configurado display:flex, entonces el valor predeterminado habría seguido siendo display:block, que al final con los bloques de contenido y barra lateral resultó así:
Aquellos. ubicación uno debajo del otro. Y no importa que les den un ancho, tendrían que envolverlos. Pero esto ni siquiera es la conveniencia de Flexbox. El punto no es acortar el código en una instrucción, sino que con la ayuda de algunas propiedades más excelentes que podemos configurar en Flexbox, podemos centrar bloques de diferentes anchos en dos direcciones, así como texto (centrado, vertical/ horizontal, al principio, al final)!
Pero antes de pasar a este tema principal, para el cual se creó esta nota, mejoremos un poco nuestro diseño simple en términos de capacidad de respuesta. Ahora, al cambiar el tamaño, el contenido y la barra lateral no se apilan uno debajo del otro. Esto debe solucionarse, porque imagina que todo el texto en bajas resoluciones quedará “comprimido” de forma antiestética en el área de contenido y la barra lateral. Ni siquiera hablo de las fotos. Por cierto, se deben dar imágenes que serán adaptativas:
img( pantalla:bloque; ancho máximo:100%; altura:automático; )
Utilicemos consultas de medios. Mejoremos nuestro CSS, no lo reescribiré todo, solo dejaré // ... * donde permanece el mismo código:
// .. $mobileBreak: 479px; html, cuerpo ( // ... ) cuerpo ( // ... ) .row ( // ... ) .middle ( @media (ancho máximo: $mobileBreak) ( display: block; ) ) .vertical- centro ( // ... ) .wrap ( // ... encabezado, .content, .sidebar ( // ... ) encabezado ( // ... ) .content ( // ... @media (max -ancho: $mobileBreak) ( ancho: auto; margen derecho: 0; ) ) .sidebar ( // ... @media (ancho máximo: $mobileBreak) ( ancho: auto; ) ) pie de página ( // . . .)
Ahora la barra lateral se plegará debajo del contenido en los teléfonos (<480px):
Trabajar con alineaciones
Como prueba, creemos en el bloque de contenido varias bolas rellenas de diferentes colores, para que queden alineadas horizontal y verticalmente en el área de contenido, para esto agregamos html:
// ... $mobileBreak: 479px; @mixin wh($w, $h) ( ancho: $w; alto: $h; ) // ... .content ( // ... padding-top: 0; .content-inner ( alto: 100% ; justificar contenido: espacio entre; alinear elementos: centro; .bounce ( -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; ) .red (fondo : #D9534F; ) .green (fondo: #6AB181; ) .blue (fondo: #2D8CD3; ) .wh50 ( @include wh(50px, 50px); ) .wh60 ( @include wh(60px, 60px); ) . wh35 ( @include wh(35px, 35px); ) ) @media (ancho máximo: $mobileBreak) ( // ... ) ) // ...
Nuevamente, donde están los signos, //..., el código sigue siendo el mismo.
Resultado:
Como puedes ver, las bolas están perfectamente alineadas. Al agregar nuevas bolas, la nivelación también se producirá sin problemas. elementos de alineación de propiedad: centro; es responsable de la alineación vertical y justifica el contenido: espacio entre; se alinea uniformemente horizontalmente.
alinear elementos: inicio flexible; ¿Es así?
Por analogía, después de aplicar align-items: flex-end; las bolas terminan en el fondo del contenedor y align-items: baseline; ¿Es así?
También hay una propiedad align-items: stretch;, parece estirar cada elemento en altura, pero no pude implementarlo rápidamente, así que no les mostraré una captura de pantalla.
Todo esto se aplica a la posición del eje horizontal (predeterminada). Pero si hacemos explícita la columna:
.content-inner (dirección flexible: columna;)
¡Entonces las bolas se volverán verticales! Y nuevamente, utilizando varias propiedades de align-items, lograremos todo lo que se logra al construir bolas horizontalmente, ¡pero solo verticalmente! También existe la propiedad align-self, que anula la propiedad align-items para una bola o grupo. De esta manera podrá gestionar de forma flexible todas las alineaciones.
En esta breve nota, analizamos los conceptos básicos del diseño adaptativo, más precisamente la mecánica que permite que los elementos de la página se adapten a diferentes resoluciones, y también analizamos los conceptos básicos del diseño flexbox. Espero que el artículo sea útil principalmente para aquellos que no quieren, por ejemplo, tomar todo el enorme bootstrap en una sola cuadrícula, sino que lo tomarán y crearán el suyo propio basándose en los materiales de esta lección.
Bueno, en conclusión, Flexbox es genial, pero aun así debes usarlo con cuidado si necesitas soporte para versiones anteriores de navegadores.
El módulo Flexbox Layout (Flexible Box) tiene como objetivo proporcionar una forma más eficiente de posicionar, alinear y distribuir el espacio libre entre elementos en un contenedor, incluso cuando su tamaño se desconoce de antemano y/o es dinámico (de ahí la palabra "flex").
La idea básica del diseño flexible es darle a un contenedor la capacidad de cambiar el ancho/alto (y el orden) de sus elementos para llenar mejor el espacio disponible (básicamente para adaptarse a todos los tipos y tamaños de pantallas). Un contenedor Flexbox expande elementos para llenar el espacio libre o los reduce para evitar desbordes.
Lo más importante es que Flexbox es direccionalmente independiente, a diferencia de los diseños convencionales (cuadros basados en posicionamiento vertical y elementos en línea basados en posicionamiento horizontal). Si bien funcionan bastante bien, carecen de la flexibilidad para admitir aplicaciones grandes o complejas (especialmente cuando se trata de cambiar la orientación, cambiar el tamaño, estirar, encoger, etc.).
Nota. Flexbox es más adecuado para componentes de aplicaciones y diseños pequeños, mientras que CSS Grid está diseñado para diseños más grandes.
Conceptos básicos y terminología
Debido a que Flexbox es un módulo completo y no una sola propiedad, contiene muchas cosas diferentes, incluidas muchas propiedades. Algunos de ellos deben configurarse en su contenedor (el elemento principal, conocido como "contenedor flexible"), mientras que otros deben configurarse en elementos secundarios (conocidos como "elementos flexibles").
Mientras que un sistema de diseño convencional se basa en direcciones de bloques y líneas, Flexbox se basa en "direcciones de flujo flexible". Mire este gráfico de la especificación que explica la idea básica de Flexbox.
Básicamente los elementos se ubicarán a lo largo eje principal(desde el inicio principal hasta el final principal) o eje transversal(desde el inicio hasta el final).
Soporte del navegador
Módulo de diseño de caja flexible CSS
Chrome para Android
El navegador Blackberry, a partir de la versión 10, admite la nueva sintaxis.
Propiedades del contenedor
Propiedades para elementos
Propiedades del elemento padre (contenedor flexible)
mostrar
Define un contenedor flexible; la cadena o el bloque depende del valor pasado. Habilita el contexto flexible para todos sus elementos secundarios directos.
Contenedor ( display: flex; /* o inline-flex */ )
Tenga en cuenta que las columnas CSS no afectan el contenedor flexible.
dirección flexible
Establece el eje principal, determinando así la dirección de los elementos ubicados en el contenedor. Flexbox (además de su contenedor opcional) es un concepto de diseño unidireccional. Piense en los elementos flexibles principalmente como filas horizontales o columnas verticales.
Contenedor (dirección flexible: fila | fila-inversa | columna | columna-inversa;)
- fila (predeterminada)- de izquierda a derecha en litros; de derecha a izquierda en rtl;
- fila inversa- de derecha a izquierda en litros; de izquierda a derecha en rtl;
- columna- lo mismo que la fila, sólo que de arriba a abajo;
- columna-inversa- lo mismo que fila inversa, sólo que de abajo hacia arriba;
envoltura flexible
De forma predeterminada, los elementos solo intentarán llenar una fila. Puede cambiar este comportamiento y permitir que los elementos pasen a la siguiente línea, si es necesario.
Contenedor( flex-wrap: nowrap | wrap | wrap-reverse; )
- nowrap (predeterminado)- todos los elementos flexibles estarán ubicados en una línea;
- envoltura- los elementos flexibles se ubicarán en varias líneas, de arriba a abajo;
- envoltura inversa- los elementos flexibles se ubicarán en varias líneas, de abajo hacia arriba;
justificar-contenido
Define la alineación a lo largo del eje mayor. Esto ayuda a distribuir el espacio libre que queda después de que todos los elementos flexibles de ancho fijo y no fijo hayan alcanzado su tamaño máximo. También ayuda a proporcionar cierto control sobre la alineación de los elementos cuando desbordan una línea.
Contenedor (justificar-contenido: inicio flexible | final flexible | centro | espacio entre | espacio alrededor;)
- inicio flexible (predeterminado)- los elementos se presionan hasta el principio de la línea;
- extremo flexible- los elementos se presionan hasta el final de la línea;
- centro- los elementos están ubicados centralmente a lo largo de la línea;
- espacio entre- los elementos están colocados uniformemente en la línea; el primer elemento está al principio de la línea, el último elemento está al final de la línea;
- espacio alrededor- los elementos se colocan uniformemente en una línea con el mismo espacio al lado de ellos. Tenga en cuenta que visualmente el espacio no es igual, ya que todos los elementos tienen el mismo espacio en ambos lados. El primer elemento tendrá una unidad de espacio en el lado del contenedor, pero dos unidades entre él y el siguiente elemento, porque el siguiente elemento también tiene una unidad en ambos lados.
alinear elementos
Esta propiedad determina el comportamiento de los elementos flexibles a lo largo del eje transversal de la línea actual. Piense en ello como , pero para el eje transversal (perpendicular al eje principal).
Contenedor ( align-items: flex-start | flex-end | centro | línea de base | estiramiento; )
- inicio flexible - los elementos se colocan al comienzo del eje transversal;
- extremo flexible los elementos se colocan al final del eje transversal;
- centro - los elementos están ubicados en el centro del eje transversal;
- base- los elementos están alineados a lo largo de la línea base;
- estirar (predeterminado)- estirar para llenar todo el contenedor (aún respetando el ancho mínimo / ancho máximo);
alinear contenido
Nota. Esta propiedad no tiene ningún efecto cuando solo hay una fila de elementos flexibles.
Contenedor (alinear contenido: inicio flexible | extremo flexible | centro | espacio entre | espacio alrededor | estiramiento;)
- inicio flexible- las líneas están ubicadas al comienzo del contenedor;
- extremo flexible- las líneas están ubicadas al final del contenedor;
- centro- las líneas se colocan en el centro del contenedor;
- espacio entre- las líneas están distribuidas uniformemente, la primera línea está ubicada al principio del contenedor y la última línea al final;
- espacio alrededor- las líneas están distribuidas uniformemente, con la misma distancia entre ellas;
- estirar (predeterminado)- las líneas se extienden a lo largo de todo el ancho para ocupar el espacio restante;
Propiedades para elementos secundarios (elementos flexibles)
orden
De forma predeterminada, todos los elementos están organizados en su orden original. Sin embargo, la propiedad de orden controla el orden en que se organizan los elementos dentro del contenedor.
Artículo (orden:
crecimiento flexible
La propiedad determina la capacidad del elemento para aumentar de tamaño si es necesario. Toma un valor adimensional como proporción, que determina cuánto espacio libre dentro del contenedor debe ocupar el elemento.
Si todos los elementos tienen su propiedad flex-grow establecida en 1, entonces el espacio libre dentro del contenedor se distribuirá uniformemente entre todos los elementos. Si uno de los elementos tiene un valor establecido en 2, entonces el elemento ocupará el doble de espacio que los demás (al menos lo intentará).
Artículo (crecimiento flexible:
No se pueden especificar números negativos.
base flexible
Determina el tamaño predeterminado de un elemento, antes de asignar el espacio restante. Podría ser una longitud (20%, 5rem, etc.) o una palabra clave. La palabra clave auto significa "parecerse a mi propiedad de ancho o alto". La palabra clave content significa que "el tamaño se basa en el contenido del elemento"; esta palabra clave aún no está muy bien soportada, por lo que es difícil de probar, y aún más difícil saber cuáles son sus hermanos min-content y max-content. y el contenido adecuado sí lo hace.
Artículo (base flexible:
Si se establece en 0, no se tendrá en cuenta el espacio adicional alrededor del contenido. Si se configura en automático, se asignará espacio adicional según el valor.
doblar
Esta es la abreviatura de y. El segundo y tercer parámetro (flex-shrink y flex-basis) son opcionales. El valor predeterminado está establecido en 0 1 auto.
Artículo (flexible: ninguno | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
alinearse
Esta propiedad le permite anular la alineación predeterminada (o una establecida usando la propiedad) para elementos flexibles individuales.
Mire la explicación de la propiedad para comprender los valores disponibles.
Artículo ( align-self: auto | flex-start | flex-end | centro | línea base | estiramiento; ) .item ( align-self: auto | flex-start | flex-end | centro | línea base | estiramiento; )
Tenga en cuenta que float , clear y vertical-align no tienen ningún efecto en un elemento flexible.
Ejemplos
Empecemos con un ejemplo muy sencillo que soluciona un problema que surge casi todos los días: el centrado perfecto. No podría ser más fácil si usas Flexbox.
Padre (pantalla: flex; alto: 300px;) .child (ancho: 100px; alto: 100px; margen: automático;)
Esto depende de que el margen esté configurado en automático en el contenedor flexible que consume espacio adicional. Por lo tanto, configurar el margen vertical en automático en un elemento hará que el elemento esté perfectamente centrado en ambos ejes.
Ahora usemos algunas propiedades más. Consideremos una lista de 6 elementos, todos con un tamaño fijo estéticamente, pero que pueden ser automáticos. Queremos que se distribuyan uniformemente a lo largo del eje horizontal para que cuando se cambie el tamaño del navegador todo esté bien (¡sin consultas de medios!).
Contenedor flexible (pantalla: flex; flujo flexible: ajuste de fila; contenido justificado: espacio alrededor;)
¡Listo! Todo lo demás son sólo algunos problemas de diseño. A continuación se muestra un ejemplo en CodePen, asegúrese de ir allí e intentar cambiar el tamaño de las ventanas para ver qué sucede.
Intentemos algo más. Imaginemos que tenemos una navegación alineada a la derecha en la parte superior de la pantalla, pero queremos que esté centrada en pantallas de tamaño mediano y en una sola columna en pantallas pequeñas. No podría ser más sencillo.
Navegación ( display: flex; flex-flow: ajuste de fila; justify-content: flex-end; ) @media all y (max-width: 800px) ( .navigation ( justify-content: space-around; ) ) @media all y (ancho máximo: 500 px) ( .navigation ( dirección flexible: columna; ) )
¡Intentemos hacer algo aún mejor jugando con la flexibilidad de nuestros artículos flexibles! ¿Qué tal un diseño de tres columnas para dispositivos móviles con un encabezado y pie de página que abarque todo el ancho de la pantalla y no dependa del orden original de los elementos?
Wrapper ( display: flex; flex-flow: row wrap; ) .header, .main, .nav, .aside, .footer ( flex: 1 100%; ) @media all y (min-width: 600px) ( .aside ( flex: 1 auto; ) ) @media all y (ancho mínimo: 800px) ( .main ( flex: 2 0px; ) .aside-1 ( orden: 1; ) .main ( orden: 2; ) .aside- 2 ( orden: 3; ) .pie de página ( orden: 4; ) )
Propiedades relacionadas
Errores
Por supuesto, Flexbox no está exento de errores. La mejor colección que he visto es Flexbugs de Philip Walton y Greg Whitworth. Este es un lugar de código abierto para rastrear todos los errores, así que creo que es mejor dejar un enlace.