Bloques flexibles de ancho completo. Todo sobre flexbox: ejemplos de uso, propiedades y ventajas. Agregar varias columnas anidadas
Quienes mantienen sitios web tarde o temprano se enfrentan a una situación en la que tienen que cambiar de empresa que proporciona servicios de hosting. Describiré una situación que permitirá a muchos principiantes, y no solo a los administradores, pasar a otro alojamiento prácticamente sin pérdida ni del rendimiento del sitio ni de los datos.
Quizás las acciones que describí a algunos les parezcan reinventar la rueda, pero he sido testigo repetidamente de cómo una simple mudanza se retrasó por un día o más y el sitio no funcionó. Ya me mudé varias veces y el sitio permaneció accesible, la mudanza pasó casi desapercibida. Diré de inmediato que no utilicé los servicios de empresas de hosting para mudarme, siempre lo hice todo yo mismo. También esta instrucción Puede que no sea aplicable cuando se mueven recursos distribuidos y de alta carga, pero no me corresponde a mí decirles a los administradores de dichos recursos cómo organizar dicho movimiento.
1 piedra. Correo.
Si todavía estás usando servicio postal del proveedor de alojamiento: deshazte de esta dependencia lo más rápido posible. Usar para dominio servicio de terceros, Por ejemplo, servicios gratuitos de Yandex.Mail para un dominio o Aplicaciones de Google. O, si la gestión independiente es fundamental para usted, plantee la suya propia. servidor de correo. Cambiar a un servicio de terceros ayudará a evitar la pérdida de datos durante la mudanza y sin duda mejorará la calidad de los servicios postales (para el proveedor de alojamiento, proporcionar servicios postales no es una prioridad, por lo que la calidad a menudo deja mucho que desear)2 piedras. Elegir un nuevo anfitrión
Por el momento, la mayoría de los proveedores de alojamiento tienen periodo de prueba cuándo puedes realizar el pedido por un período determinado (de 7 a 30 días) plan gratuito para pruebas. No seas perezoso y solicita una tarifa de prueba al proveedor de hosting que te interese por sus precios y agrega allí uno de los dominios de tercer nivel, o usa la dirección IP recibida (puedes verla en el panel de control). Haga ping a esta IP y compare los indicadores con los indicadores actuales, intente instalar algo de prueba allí, como un foro en phpbb3 o un motor para un sitio web Joomla o Drupal. Por qué ellos: estos motores exigen bastante recursos y, si surgen problemas incluso con una instalación mínima, entonces el proveedor de alojamiento no es para usted. Mire las versiones del software que utiliza el proveedor de alojamiento; es muy deseable que las versiones no sean inferiores a las de su proveedor de alojamiento actual.
Otro parámetro importante que le resultará útil para la mudanza es la capacidad de acceder de forma remota al servidor SQL si utiliza una base de datos SQL para el sitio. Hoy en día, la mayoría de los buenos proveedores de alojamiento ofrecen este tipo de servicio. Si no encuentra este servicio en el panel de control, consulte con soporte técnico. Y no se apresure a tomar la decisión final: debe abordar la elección conscientemente, no debe elegir la primera opción que se le presente, asegúrese de considerar un par más. Según mi experiencia personal, no leería reseñas sobre el proveedor de alojamiento seleccionado; a menudo, dichas reseñas no contienen información específica e importante para usted, y estos detalles surgirán en el momento más inoportuno (por ejemplo, restricciones en la cantidad de correos electrónicos por La hora puede ser crítica para sitios donde se utilizan notificaciones por correo electrónico sobre noticias o mensajes personales en el foro).
Si lo deseas, incluso puedes conectar algún servicio para comprobar la disponibilidad de un recurso y ver sus resultados a los pocos días. Si está satisfecho con todo, no dude en solicitar la tarifa que necesita.3 piedras. Pruebas de rendimiento del sitio y de la base de datos SQL en una nueva ubicación
Este paso debe realizarse si está utilizando una base de datos SQL para almacenar datos. Cabe mencionar que hay CMS que no utilizan bases de datos SQL para su trabajo y almacenan todo como archivos; si usas esta opción, debes omitir este paso y tu tarea se simplificará.
Para comenzar, habilite el acceso remoto al servidor SQL para el nuevo proveedor de alojamiento, configure cuentas para acceder a él (para acceder, generalmente solo necesita indicar la IP del recurso desde el cual se realizará el acceso; allí debe indicar la IP en donde se encuentra actualmente su sitio principal Conéctese y configure en el nuevo hosting su dominio (por ahora solo conéctese, pero no indique ningún cambio en). configuración actual su dominio del registrador o proveedor de alojamiento actual).
Ahora necesitas hacer copia de seguridad de datos de la base de datos SQL utilizada para el sitio. Si la base de datos es pequeña, los fondos proporcionados por el proveedor de alojamiento suelen ser suficientes. Para esto utilizo un script Sypex Dumper simple y rápido (recomiendo probar primero la versión anterior 1 y luego probar la versión 2). Transfiera este volcado a nuevo alojamiento y restaurarlo. Paralelamente, puede transferir a través de archivos ftp su sitio a un nuevo alojamiento.
Para las pruebas, utilizo las capacidades del archivo de hosts, donde puedes ingresar el dominio que necesitas y la IP que necesitas. Aquellos. en su máquina, ingrese su dominio y dirección IP del nuevo alojamiento en el archivo de hosts y, a través de su navegador, el sitio comenzará a abrirse desde una nueva ubicación. Esto es necesario para verificar la funcionalidad del sitio en una nueva ubicación (a veces hay problemas con la codificación). No olvides arreglar archivo de configuración motor del sitio, donde especifica nuevos datos para trabajar con la base de datos SQL. Si todo funciona, sigue adelante. Elimina la mención de tu dominio de los hosts para que no estorbe por ahora.4 piedras. Movimiento transparente.
Lea la ayuda del proveedor de alojamiento para descubrir qué parámetros necesita especificar para el acceso remoto a la base de datos SQL. Cree una versión actualizada de la base de datos SQL y restáurela rápidamente en un nuevo hosting. Sin perder tiempo, corrija el archivo de configuración de su sitio y especifique allí que los datos deben leerse desde una base de datos remota. En en esta etapa El sitio puede experimentar ralentizaciones, pero esto es temporal. La pérdida de datos también puede ocurrir si tiene un recurso muy visitado y los datos aparecen cada segundo. Por lo tanto, para esta acción, es recomendable seleccionar el horario menos ocupado para el sitio y quizás activar brevemente el modo de mantenimiento del sitio para que los usuarios no tengan tiempo de escribir algo que se perderá al cambiar a otra base de datos. Después de cambiar, verifique la funcionalidad del sitio y continúe.
Ahora cambie la administración del dominio a otro hosting, cambie el servidor DNS o las direcciones IP de los subdominios en el registrador y espere hasta que todo se extienda por todo el mundo; generalmente esto sucede dentro de 3 a 4 horas, no más. Después de que su sitio comience a abrirse desde una nueva ubicación, use su archivo de hosts, ingresando allí la dirección IP anterior del dominio y copie los archivos del sitio desde la ubicación anterior. Luego elimine la mención de su dominio en los hosts y sincronice los archivos copiados con los archivos del nuevo hosting. Esto será necesario para aquellos recursos donde algunos archivos adjuntos, archivos o avatares de usuario podrían haberse conectado durante este tiempo. Simplemente no cambie el archivo de configuración; de lo contrario, el sitio dejará de funcionar hasta que lo arregle nuevamente.
¿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:
El elemento HTML
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.
¡Hola habr!
Una buena tarde, sin presagiar nada interesante, nuestro chat recibió una propuesta del autor de una publicación que escribió en la primavera de 2012, para escribir un artículo remake, pero usando FlexBox y una explicación adjunta de qué y cómo funciona. Después de algunas dudas, el interés por comprender la especificación más profundamente aún ganó y felizmente me senté a escribir esos mismos ejemplos. A medida que nos sumergimos en esta área, muchos matices comenzaron a aclararse, que se convirtieron en algo más que un simple rediseño de los diseños. En general, en este artículo quiero hablar sobre una especificación tan maravillosa llamada "Módulo de diseño de caja flexible CSS" y mostrar algunas de sus características interesantes y ejemplos de aplicación. Invito amablemente a todos los que estén interesados a unirse al truco.
Lo que me gustaría llamar su atención es que para crear un diseño en FlexBox, el desarrollador necesitará cierto grado de adaptación. Por mi propio ejemplo, sentí que muchos años de experiencia me estaban jugando una broma cruel. FlexBox requiere una forma ligeramente diferente de pensar acerca de alinear elementos en un flujo.
parte técnica
Antes de pasar a cualquier ejemplo, vale la pena comprender qué propiedades se incluyen en esta especificación y cómo funcionan. Ya que algunos de ellos no son muy claros inicialmente, y otros están rodeados de mitos que nada tienen que ver con la realidad.Entonces. Hay dos tipos principales de elementos en FlexBox: Flex Container y sus hijos: Flex Items. Para inicializar el contenedor, simplemente asigne, vía css, al elemento pantalla: flexible; o pantalla: flexible en línea;. La diferencia entre flex e inline-flex está solo en el principio de interacción con los elementos que rodean el contenedor, similar a display: block; y mostrar: inline-block;, respectivamente.
Dentro de un contenedor flexible se crean dos ejes, el eje principal y el eje perpendicular o transversal. La mayoría de los elementos flexibles se alinean a lo largo del eje principal y luego a lo largo del eje transversal. De forma predeterminada, el eje principal es horizontal y está dirigido de izquierda a derecha, y el eje transversal es vertical y está dirigido de arriba a abajo.
La dirección de los ejes se puede controlar mediante una propiedad CSS. dirección flexible. Esta propiedad toma varios valores:
fila(predeterminado): el eje principal del contenedor flexible tiene la misma orientación que el eje en línea del modo de dirección de fila actual. 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: Todo es igual que en la fila, solo se intercambian el inicio principal y el final principal.
columna: igual que la fila, solo que ahora el eje principal se dirige de arriba a abajo.
columna-inversa: igual que la fila inversa, solo que el eje principal se dirige de abajo hacia arriba.
Puedes ver cómo funciona esto en el ejemplo de jsfiddle.
De forma predeterminada, todos los elementos flexibles de un contenedor se colocan en una línea; incluso si no caben en el contenedor, se extienden más allá de sus límites. Este comportamiento se alterna usando la propiedad envoltura flexible. Esta propiedad tiene tres estados:
ahorarap(predeterminado): los elementos flexibles se alinean en una sola línea de izquierda a derecha.
envoltura: los elementos flexibles se construyen en modo multilínea, la transferencia se realiza en la dirección del eje transversal, de arriba a abajo.
envoltura inversa: igual que envolver, pero se envuelve de abajo hacia arriba.
Veamos un ejemplo.
Para mayor comodidad, hay una propiedad adicional. flujo flexible, en el que puedes especificar simultáneamente dirección flexible Y envoltura flexible. Se parece a esto: flujo flexible:
Los elementos de un contenedor se pueden alinear usando la propiedad justificar-contenido a lo largo del eje principal. Esta propiedad acepta hasta cinco valores diferentes.
inicio flexible(predeterminado): los elementos flexibles están alineados con el origen del eje principal.
extremo flexible: los elementos están alineados al final del eje principal
centro: Los elementos están alineados con el centro del eje principal.
espacio entre: los elementos ocupan todo el ancho disponible en el contenedor, los elementos más externos se presionan firmemente contra los bordes del contenedor, y espacio libre distribuido uniformemente entre los elementos.
espacio alrededor: Los elementos flexibles están alineados de modo que el espacio libre se distribuya uniformemente entre los elementos. Pero vale la pena señalar que el espacio entre el borde del contenedor y los elementos exteriores será la mitad del espacio entre los elementos en el medio de la fila.
Por supuesto, puedes hacer clic en un ejemplo de cómo funciona esta propiedad.
Eso no es todo, también tenemos la posibilidad de alinear elementos a lo largo del eje transversal. Aplicando la propiedad alinear elementos, que también toma cinco valores diferentes, puedes lograr un comportamiento interesante. Esta propiedad le permite alinear elementos en una fila entre sí.
inicio flexible: todos los elementos se empujan al principio de la línea
extremo flexible: los elementos se empujan hasta el final de la línea
centro: los elementos están alineados al centro de la fila
base: Los elementos están alineados con la línea base del texto.
estirar(predeterminado): los elementos se estiran para llenar toda la línea.
Otra propiedad similar a la anterior es alinear contenido. Es el único responsable de alinear líneas enteras con respecto al contenedor flexible. No tendrá ningún efecto si los elementos flexibles ocupan una línea. La propiedad adquiere seis valores diferentes.
inicio flexible: todas las líneas se presionan hasta el comienzo del eje transversal
extremo flexible: todas las líneas se presionan hasta el final del eje transversal
centro: Todas las líneas de embalaje están alineadas con el centro del eje transversal.
espacio entre: las líneas se distribuyen desde el borde superior hasta el inferior, dejando espacio libre entre las líneas, mientras que las líneas más externas se presionan contra los bordes del contenedor.
espacio alrededor: Las líneas se distribuyen uniformemente por todo el contenedor.
estirar(predeterminado): las líneas se estiran para ocupar todo el espacio disponible.
Puedes probar cómo funcionan align-items y align-content en este ejemplo. Presenté específicamente estas dos propiedades en un ejemplo, ya que interactúan bastante estrechamente y cada una realiza su propia tarea. Observe lo que sucede cuando los elementos se colocan en una línea o en varias líneas.
Hemos resuelto los parámetros de un contenedor flexible, solo queda descubrir las propiedades de los elementos flexibles.
La primera propiedad que conoceremos es orden. Esta propiedad le permite cambiar la posición en la secuencia. elemento específico. De forma predeterminada, todos los elementos flexibles tienen orden: 0; y están construidos en orden de flujo natural. En el ejemplo puedes ver cómo los elementos cambian de lugar si aplicas diferentes significados orden.
Una de las principales propiedades es base flexible. Con esta propiedad podemos especificar el ancho base de un elemento flexible. El valor predeterminado es auto. Esta propiedad está estrechamente relacionada con crecimiento flexible Y flex-contraíble, del que hablaré un poco más adelante. Acepta un valor de ancho en px, %, em y otras unidades. Básicamente, este no es estrictamente el ancho del elemento flexible, es una especie de punto de partida. En relación con el cual el elemento se estira o se contrae. En el modo automático, el elemento obtiene un ancho base relativo al contenido que contiene.
crecimiento flexible en varios recursos tiene una descripción completamente incorrecta. Dice que supuestamente establece la proporción de los tamaños de los elementos en el contenedor. En realidad esto no es cierto. Esta propiedad especifica el factor de ampliación del elemento si hay espacio libre en un contenedor. Por defecto, esta propiedad tiene un valor de 0. Imaginemos que tenemos un contenedor flexible que tiene un ancho de 500px, dentro de él hay dos elementos flexibles, cada uno con un ancho base de 100px. Esto deja otros 300 px de espacio libre en el contenedor. Si especificamos flex-grow: 2; para el primer elemento y flex-grow: 1; Como resultado, estos bloques ocuparán todo el ancho disponible del contenedor, solo el ancho del primer bloque será de 300 px y el del segundo solo de 200 px. ¿Qué pasó? Lo que pasó es que los 300px de espacio libre disponibles en el contenedor se distribuyeron entre los elementos en una proporción de 2:1, +200px para el primero y +100px para el segundo. En realidad, así es como funciona.
Aquí pasamos sin problemas a otra propiedad similar, a saber flex-contraíble. El valor predeterminado es 1. También establece un factor para cambiar el ancho de los elementos, solo en reverso. Si el contenedor tiene un ancho menos que la suma del ancho básico de los elementos, entonces esta propiedad entra en vigor. Por ejemplo, el contenedor tiene un ancho de 600 px y la base flexible de los elementos es 300 px. Proporcione el primer elemento flex-shrink: 2; y el segundo elemento flex-shrink: 1;. Ahora reduzcamos el contenedor en 300 px. Por tanto, la suma del ancho de los elementos es 300px mayor que el contenedor. Esta diferencia se distribuye en una proporción de 2:1, por lo que restamos 200 px del primer bloque y 100 px del segundo. Nuevo tamaño Los elementos son 100px y 200px, para el primer y segundo elemento, respectivamente. Si configuramos flex-shrink en 0, evitamos que el elemento se reduzca a un tamaño menor que su ancho base.
De hecho, esta es una descripción muy simplificada de cómo funciona todo, para que el principio general quede claro. Con más detalle, si alguien está interesado, el algoritmo se describe en la especificación.
Las tres propiedades se pueden escribir en forma abreviada usando la expresión doblar. Esto se parece a esto:
doblar:
Y también podemos escribir dos versiones más abreviadas, flexionar:automático; Y flexionar: ninguno;, lo que significa flexionar: 1 1 automático; Y flexionar: 0 0 automático; respectivamente.
La última propiedad de los elementos flexibles sigue siendo alinearse. Aquí todo es simple, es lo mismo que alinear elementos para un contenedor, lo que le permite anular la alineación de un elemento específico.
¡Eso es todo, estoy cansado de esto! ¡Da ejemplos!
CON parte técnica Lo descubrimos, resultó bastante prolongado, pero hay que profundizar en ello. Ahora podemos pasar a la aplicación práctica.Durante el diseño de esas “cinco plantillas de marcado responsivas realmente útiles”, tuve que decidir situaciones típicas, que el desarrollador encuentra con bastante frecuencia. Con flexbox, implementar estas soluciones se vuelve más fácil y flexible.
Tomemos el mismo cuarto diseño, porque... Tiene los elementos más interesantes.
Primero, designemos el ancho principal de la página, alineémoslo con el centro y presionemos el pie de página hacia la parte inferior de la página. Como siempre en general.
Html (fondo: #ccc; altura mínima: 100%; familia de fuentes: sans-serif; pantalla: -webkit-flex; pantalla: flex; dirección flexible: columna;) cuerpo (margen: 0; relleno: 0 15px ; mostrar: -webkit-flex; mostrar: flex-direction: columna; flex: auto; 30px 0 10px; mostrar: -webkit-flex; ajustar el espacio entre; : 960px; ancho mínimo: 430px; margen: automático; tamaño del cuadro: cuadro de borde: 430px;
Debido al hecho de que especificamos flex-grow: 1 para .main; se extiende hasta toda la altura disponible, presionando así el pie de página hacia abajo. La ventaja de esta solución es que el pie de página puede tener una altura no fija.
Ahora coloquemos el logo y el menú en el encabezado.
.logo (tamaño de fuente: 0; margen: -10px 10px 10px 0; pantalla: flex; flex: ninguno; align-items: center; ) .logo:antes, .logo:después (contenido: ""; pantalla: bloque ; ) .logo:antes (fondo: #222; ancho: 50px; alto: 50px; margen: 0 10px 0 20px; radio del borde: 50%; ) .logo:después (fondo: #222; ancho: 90px; alto : 30px; ) .nav ( margen: -5px 0 0 -5px; pantalla: -webkit-flex; pantalla: flex; flex-wrap: wrap; ) .nav-itm ( fondo: #222; ancho: 130px; alto: 50px; tamaño de fuente: 1,5rem; decoración de texto: ninguna; pantalla: -webkit-flex; justificar-contenido: centro;
Dado que el encabezado tiene flex-wrap: wrap; y justificar contenido: espacio entre; El logotipo y el menú están dispersos en diferentes lados del encabezado y, si no hay suficiente espacio para el menú, se moverá elegantemente debajo del logotipo.
A continuación vemos gran publicación o una pancarta, es difícil decir qué es específicamente, pero ese no es el punto. Tenemos una imagen a la derecha y texto con título a la izquierda. Personalmente, sigo la idea de que cualquier elemento debe ser lo más flexible posible, independientemente de si el diseño es adaptativo o estático. Entonces, en esta publicación tenemos una barra lateral en la que se coloca una imagen, estrictamente hablando, no podemos decir exactamente qué ancho necesitamos, porque hoy tenemos una imagen grande, mañana una pequeña y no queremos rehacer el elemento. desde cero cada vez. Esto significa que necesitamos que la barra lateral ocupe el lugar que necesita y el resto del espacio se destinará al contenido. Hagamos esto:
Cuadro (tamaño de fuente: 1.25rem; altura de línea: 1.5; estilo de fuente: cursiva; margen: 0 0 40px -50px; pantalla: -webkit-flex; pantalla: flex; flex-wrap: wrap; justify-content: centro .box-base (margen izquierdo: 50px; flex: 1 0 430px; ) .box-side (margen izquierdo: 50px; flex: ninguno; ) .box-img (ancho máximo: 100%; alto: auto)
Como puede ver para .box-base, donde tenemos el título y el texto, especifiqué el ancho de la base con base flexible: 430px;, y también prohibió la contracción del bloque usando contracción flexible: 0;. Con esta manipulación dijimos que el contenido no puede tener menos de 430px de ancho. Y en vista de que para .box indico envoltura flexible: envoltura; En el momento en que la barra lateral y el contenido no caben en el contenedor.box, la barra lateral automáticamente caerá debajo del contenido. Y todo esto sin aplicación. @medios de comunicación! Creo que esto es realmente genial.
Nos quedamos con contenido de tres columnas. Hay varias soluciones a este problema, mostraré una de ellas; en los demás diseños hay otra opción.
Creemos un contenedor, llamémoslo .content y configúrelo.
.content (margen inferior: 30px; pantalla: -webkit-flex; pantalla: flex; flex-wrap: wrap;)
El contenedor tiene tres columnas, .banners, .posts, .comments
.banners (flex: 1 1 200px;) .posts (margen: 0 0 30px 30px; flex: 1 1 200px;) .comments (margen: 0 0 30px 30px; flex: 1 1 200px;)
Le di a las columnas un ancho de base de 200 px para que no se estrecharan demasiado, pero sería mejor si se movieran una debajo de la otra según fuera necesario.
Según el diseño, no podremos prescindir de @media con el contenido, así que ajustemos un poco más el comportamiento de las columnas en cuanto a ancho.<800px и <600px.
@media pantalla y (ancho máximo: 800px) ( .banners ( margen izquierdo: -30px; pantalla: -webkit-flex; pantalla: flex; base flexible: 100%; ) .posts ( margen izquierdo: 0; ) ) @media screen y (ancho máximo: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )
Esa es toda la magia cuando se trata de crear un diseño en FlexBox. Otra tarea que me gustó es la del quinto diseño, concretamente se trata de la adaptación de contenidos.
Vemos como en resolución de escritorio las publicaciones se construyen en una cuadrícula de tres seguidas. Cuando el ancho de la ventana gráfica es inferior a 800 px, la cuadrícula se convierte en una columna con publicaciones, donde la foto de la publicación se alinea en los lados izquierdo y derecho del contenido de la publicación, alternativamente. Y si el ancho es inferior a 600 px, la foto de la publicación queda completamente oculta.
.grid (display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33.33% - 30px * 2/3); pantalla: -webkit-flex; pantalla: flex-wrap: wrap ) .grid-img ( margen: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; grid-img (flex: 0 0 auto;) .grid-itm:nth-child(even) .grid-img (margen: 0 0 0 30px; orden: 2; ) .grid-itm:nth-child (impar) .grid-img ( margen: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen y (max-width: 600px) ( .grid-img (pantalla: ninguna; ) )
De hecho, esto es sólo una pequeña parte de lo que se puede implementar con FlexBox. La especificación le permite crear diseños de página muy complejos utilizando código simple.
Flexbox está diseñado para salvarnos de la maldad del CSS puro (como la alineación vertical) y hace un gran trabajo. Pero comprender los principios de su funcionamiento a veces puede resultar complicado, especialmente si eres principiante.
El objetivo principal de Flexbox es hacer que trabajar con capas sea flexible e intuitivo. Para lograr este objetivo, permite que los contenedores decidan cómo manejar a sus hijos, incluido cambiar su tamaño y espaciado.
Suena bien, pero veamos si en la práctica funciona tan bien. En este artículo, exploraremos las 5 propiedades de Flexbox más populares, qué hacen y cómo funcionan realmente.
Pantalla: Flex
Aquí hay una página de ejemplo:
Tenemos 4 divs de diferentes colores y tamaños que están dentro de un div gris. Cada div tiene una propiedad display: block. Por tanto, cada cuadrado ocupa todo el ancho de la línea.
Para comenzar con Flexbox, necesitamos hacer de nuestro contenedor un contenedor flexible. Esto se hace así:
#contenedor (pantalla: flex;)
Parece que no ha cambiado mucho: los divs simplemente se alinearon. Pero hiciste algo realmente poderoso. Le has dado a tus cuadrados una propiedad interesante llamada "contexto flexible".
Dirección flexible
Un contenedor flexible tiene dos ejes: el eje principal y el perpendicular al mismo.
De forma predeterminada, todos los objetos están ubicados a lo largo del eje principal: de izquierda a derecha. Es por eso que nuestros cuadrados se alinearon cuando aplicamos display: flex . Sin embargo, la dirección flexible permite girar el eje principal.
#contenedor (pantalla: flex; dirección flexible: columna;)
Es importante tener en cuenta que flex-direction: column no alinea cuadrados a lo largo de un eje perpendicular al principal. El propio eje principal cambia de ubicación y ahora se dirige de arriba a abajo.
Hay un par de propiedades más para flex-direction: fila-reversa y columna-reversa.
Justificar contenido
Justify-content es responsable de alinear elementos a lo largo del eje principal.
Volvamos a flex-direction: fila.
#contenedor (display: flex; flex-direction: fila; justificar-contenido: flex-start;)
Justify-content puede tomar 5 valores:
- inicio flexible;
- extremo flexible;
- centro ;
- espacio entre;
- espacio alrededor.
El espacio entre establece la misma distancia entre los cuadrados, pero no entre el contenedor y los cuadrados. Space-around también establece la misma distancia entre los cuadrados, pero ahora la distancia entre el contenedor y los cuadrados es la mitad de la distancia entre los cuadrados.
Alinear elementos
Si justificar contenido funciona en el eje principal, entonces alinear elementos funciona en el eje perpendicular al eje principal.
Volvamos a flex-direction: fila y revisemos los comandos de alineación de elementos:
- inicio flexible;
- extremo flexible;
- centro ;
- estirar ;
- base.
Vale la pena señalar que para alinear elementos: estirar la altura de los cuadrados debe establecerse en auto . Para align-items: baseline no es necesario eliminar las etiquetas de párrafo; de lo contrario, quedará así:
Para comprender mejor cómo funcionan los ejes, combinemos justify-content con align-items y veamos cómo funciona la alineación central para las dos propiedades de dirección flexible:
Alinearse
Align-self le permite alinear elementos individualmente.
#container ( align-items: flex-start; ) .square#one ( align-self: center; ) // Solo este cuadrado estará centrado.
Usemos align-self para dos cuadrados y usemos align-items: center y flex-direction: row para el resto.
Base flexible
Flex-basis es responsable del tamaño inicial de los elementos antes de que otras propiedades de Flexbox los cambien: 
La base flexible afecta el tamaño de los elementos a lo largo del eje principal. 
Veamos qué pasa si cambiamos la dirección del eje principal:
Observe que también tuvimos que cambiar la altura de los elementos. Flex-basis puede definir tanto la altura de los elementos como su ancho dependiendo de la dirección del eje.
Crecimiento flexible
Esta propiedad es un poco más complicada.
Primero, démosle a nuestros cuadrados el mismo ancho de 120px:
De forma predeterminada, el valor de crecimiento flexible es 0. Esto significa que los cuadrados no pueden crecer (ocupar el espacio restante en el contenedor).
Intentemos configurar flex-grow en 1 para cada cuadrado:
Los cuadrados ocuparon el espacio restante en el contenedor. El valor de crecimiento flexible anula el valor de ancho.
Pero aquí surge una pregunta: ¿qué significa flex-grow:1?
Intentemos configurar flex-grow en 999:
Y... no pasó nada. Esto sucedió porque flex-grow no acepta valores absolutos, sino relativos.
Esto significa que no importa cuál sea el valor de flex-grow, lo que importa es cuál es en relación con los otros cuadrados:
Al principio, el crecimiento flexible de cada cuadrado es 1, el total es 6. Esto significa que nuestro contenedor está dividido en 6 partes. Cada cuadrado ocupará 1/6 del espacio disponible en el contenedor.
Cuando el crecimiento flexible del tercer cuadrado se convierte en 2, el contenedor se divide en 7 partes (1 + 1 + 2 + 1 + 1 + 1).
Ahora el tercer cuadrado ocupa 2/7 del espacio, el resto, 1/7 cada uno.
Vale la pena recordar que flex-grow solo funciona para el eje principal (hasta que cambiemos su dirección).
Retracción flexible
Flex-shrink es exactamente lo opuesto a flex-grow. Determina cuánto puede reducirse el tamaño del cuadrado.
Flex-shrink se utiliza cuando los elementos no caben en el contenedor.
Usted determina qué elementos deben reducirse de tamaño y cuáles no. De forma predeterminada, el valor de flex-shrink para cada cuadrado es 1. Esto significa que los cuadrados se reducirán a medida que el contenedor se haga más pequeño.
Establezcamos flex-grow y flex-shrink en 1:
Ahora cambiemos el valor de flex-shrink para el tercer cuadrado a 0. No está permitido reducirlo, por lo que su ancho permanecerá en 120px:
Vale la pena recordar que flex-shrink se basa en proporciones. Es decir, si un cuadrado tiene una contracción flexible de 6 y el resto tiene una contracción flexible de 2, entonces esto significa que nuestro cuadrado se encogerá tres veces más rápido que los demás.
Doblar
Flex reemplaza flex-grow, flex-shrink y flex-basis.
Los valores predeterminados son 0 (crecer), 1 (reducir) y automático (base).
Creemos dos cuadrados:
Cuadrado#uno (flex: 2 1 300px; ) .cuadrado#dos (flex: 1 2 300px; )
Ambos cuadrados tienen la misma base flexible. Esto significa que ambos tendrán 300 px de ancho (ancho del contenedor: 600 px más margen y relleno).
Pero cuando el contenedor comienza a crecer en tamaño, el primer cuadrado (con el mayor crecimiento flexible) crecerá dos veces más rápido, y el segundo cuadrado (con el mayor flex-contracción) se reducirá dos veces más rápido.
Cómo crecen y encogen las cosas
Cuando el primer cuadrado aumenta, no llega a ser el doble del tamaño del segundo cuadrado, y cuando el segundo cuadrado disminuye, no llega a ser la mitad del tamaño del primero. Esto se debe a que el crecimiento flexible y la contracción flexible son responsables de la tasa de crecimiento y contracción.
un poco de matematicas
Tamaño del contenedor inicial: 640 px. Resta 20 px de cada lado para el relleno y nos quedarán 600 px, lo suficiente para dos cuadrados.
Cuando el ancho del contenedor llega a 430 px (una pérdida de 210 px), el primer cuadrado (flex-shrink: 1) pierde 70 px. El segundo cuadrado (flex-shrink: 2) pierde 140px.
Cuando el contenedor se reduce a 340 px, perdemos 300 px. El primer cuadrado pierde 100 px, el segundo, 200 px.
Lo mismo ocurre con flex-grow.
Flexbox presenta una nueva forma de mostrar cuadros en un diseño usando css3 y está diseñado para facilitar la colocación de elementos entre sí. En este artículo, veremos la sintaxis más nueva para el modelo flexbox. Las versiones del navegador están cambiando bastante rápido en estos días, por lo que sabrá cuándo el modelo flexbox será ampliamente compatible con proyectos de la vida real.
¿Para qué sirve Flexbox?
Los desarrolladores han utilizado durante mucho tiempo tablas, elementos flotantes, bloques en línea y otras propiedades CSS para darle a los bloques el diseño deseado. Sin embargo, ninguna de las herramientas anteriores fue diseñada para crear páginas y aplicaciones complejas que se utilizan en casi todos los proyectos hoy en día. Cosas simples como el centrado vertical eran bastante difíciles de lograr. Crear un diseño basado en cuadrículas líquidas generalmente se considera el colmo del profesionalismo, razón por la cual los marcos CSS basados en cuadrículas se han generalizado. Entonces, si muchos proyectos utilizan a menudo cuadrículas fluidas, bloques de igual altura, centrado vertical de bloques, etc., entonces surge la pregunta: "¿Por qué no existe todavía una función que permita hacer estas cosas de forma rápida y sencilla?"
¡Flexbox tiene como objetivo resolver todos estos problemas!
Estado de la especificación y soporte del navegador
El modelo flexbox lleva cuatro años en desarrollo. Los navegadores utilizan diferentes versiones experimentales de la especificación. En septiembre de 2012, la tercera revisión de sintaxis de Flexbox realizada por un grupo de desarrolladores del W3C alcanzó el estatus de candidato del W3C. Esto significa que el W3C aprueba la sintaxis actual y da luz verde a los navegadores para utilizar prefijos de proveedores.
Historial de cambios en las especificaciones de Flexbox:
- Borrador de trabajo de julio de 2009 (mostrar: recuadro;)
- Borrador de trabajo de marzo de 2011 (mostrar: flexbox;)
- Borrador de trabajo de noviembre de 2011 (mostrar: flexbox;)
- Borrador de trabajo de marzo de 2012 (mostrar: flexbox;)
- Borrador de trabajo de junio de 2012 (mostrar: flex;)
- Recomendación candidata de septiembre de 2012 (mostrar: flex;)
Los navegadores ahora tienen soporte rápido para Flexbox. Chrome 22+, Opera 12.1+, IE10, Firefox >=16 ya son compatibles con Flexbox. Recomiendo usar uno de estos navegadores para ver los ejemplos.
Concepto y terminología
Si bien flexbox está diseñado para facilitar la organización de bloques en un diseño, lo que a menudo ha sido difícil y en algunas situaciones problemático en el pasado, llevará algún tiempo resolver estos problemas utilizando Flexbox en proyectos de la vida real. La terminología del modelo puede dificultar su uso. Veamos cómo funciona el modelo Flexbox.
El modelo Flexbox incluye un contenedor flexible y elementos flexibles. Un contenedor flexible debe tener una propiedad de visualización configurada en flex o inline-flex. Con el valor flex, el contenedor es un elemento de bloque y con inline-flex, es un elemento en línea.
Ejemplo de declaración de contenedor flexible:
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex;)
El contenedor flexible es el padre de los elementos flexibles. Puede haber tantos puntos flexibles como quieras. Todo lo que está fuera del contenedor flexible y dentro de los elementos flexibles se muestra como de costumbre. Entonces Flexbox define cómo se distribuirán los elementos flexibles dentro de un contenedor flexible.
Los artículos flexibles se encuentran dentro del contenedor flexible a lo largo de la línea flexible. De forma predeterminada, solo hay una línea flexible en un contenedor flexible. A continuación se muestra un ejemplo con dos elementos organizados a lo largo de la línea flexible de izquierda a derecha de forma predeterminada:
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex; ancho: 700 px; color de fondo: verde; margen: 20 px automático;) .flex-item (color de fondo: rojo; ancho: 100 px; alto: 100 px; margen: 5px; color: #fff)
Modos de escritura (modos de visualización de contenido)
Una parte importante de la personalización de Flexbox es cambiar la dirección de la línea flexible. De forma predeterminada, la dirección de la línea flexible coincide con la dirección del texto: de izquierda a derecha, de arriba a abajo.
Ha aparecido un nuevo módulo de modos de escritura en la especificación. Te permite cambiar la dirección del texto de derecha a izquierda, o incluso verticalmente.
Este módulo está en desarrollo, pero Chrome admite la propiedad CSS de dirección. Si en el ejemplo anterior configuramos la propiedad de dirección: rtl (de derecha a izquierda), entonces no solo cambiará la dirección de visualización del contenido de derecha a izquierda, sino también la dirección de la línea flexible, lo que conducirá a un cambio en el diseño.
Cuerpo ( dirección: rtl; ) .flex-container ( pantalla: -webkit-flex; pantalla: flex; ancho: 700px; altura: 240px; color de fondo: verde; margen: 10px auto; ) .flex-item ( fondo- color: rojo; ancho: 100px; margen: 5px;
En este ejemplo, puedes ver por qué la terminología de Flexbox es tan abstracta en este momento. No podemos simplemente indicar “derecha”, “izquierda”, “abajo”, “arriba” cuando no tenemos idea del idioma en el que está escrita la página (quizás árabe, ¡estilo de escritura de derecha a izquierda!).
Ejes principal y transversal.
Para ser independiente de la dirección del modo de visualización del contenido, Flexbox utiliza el concepto de eje principal y eje transversal. Las líneas flexibles siguen el eje principal. El eje transversal es perpendicular al eje principal. Los nombres de los puntos inicial y final, así como la dirección de cada eje:
- Inicio principal
- Extremo principal
- Dirección principal (a veces llamada dirección de flujo)
- Inicio cruzado
- Extremo cruzado
- Dirección transversal
Antes de continuar, es importante comprender la terminología de los ejes mayor y transversal. Todo en un modelo flexbox está posicionado en relación con estos dos ejes. En todos nuestros ejemplos, el modo de fusión del modo de escritura fue de izquierda a derecha y de arriba a abajo. Pero debes tener en cuenta que puede que este no sea siempre el caso.
Propiedades del contenedor flexible:
Dirección flexible
La propiedad flex-direction le permite cambiar los ejes de un contenedor flexible. De forma predeterminada, la propiedad de dirección flexible es fila. En este caso, los elementos flexibles se organizan según el modo de escritura. Te recordamos nuevamente que esto significa que la dirección es de izquierda a derecha, de arriba a abajo (por defecto).
Otros valores posibles:
- row-reverse: el inicio principal y el final principal se invierten. Incluso si el modo de escritura se especifica como ltr (de izquierda a izquierda), los elementos flexibles seguirán ubicados de derecha a izquierda.
- columna: El eje principal y el eje transversal se intercambian. Si el modo de visualización del contenido es horizontal, los elementos flexibles seguirán estando colocados verticalmente.
- column-reverse: similar a la columna pero invertida.
Cambiemos la propiedad flex-direction a columna en el ejemplo anterior:
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex; -webkit-flex-direction: columna; flex-direction: columna; ancho: 700px; alto: 240px; color de fondo: verde; margen: 10px auto;) .flex-item (color de fondo: rojo; ancho: 100px; alto: 100px; margen: 5px;)
Ahora los elementos flexibles se colocan verticalmente.
justificar-contenido
justify-content controla la ubicación de elementos flexibles a lo largo del eje principal. Valores posibles:
- inicio flexible (predeterminado)
- extremo flexible
- centro
- espacio entre
- espacio alrededor
Veamos un ejemplo con justify-content: center para que los elementos flexibles queden centrados en el eje principal:
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex; -webkit-justify-content: centro; justify-content: centro; ancho: 700px; alto: 240px; color de fondo: verde; margen: 10px auto;) .flex-item (color de fondo: rojo; ancho: 100px; alto: 100px; margen: 5px;)
flex-start, flex-end y center funcionan conectándose entre sí a lo largo de un eje principal. Pero el espacio entre y el espacio alrededor distribuyen el espacio libre entre elementos flexibles de cierta manera. Aquí hay un diagrama de la especificación que muestra la distribución de justify-content:
alinear elementos
align-items es una propiedad adicional de justify-content. align-items controla la visualización de elementos flexibles en relación con el eje perpendicular. Valores posibles:
- inicio flexible (predeterminado)
- extremo flexible
- centro
- base
- estirar
Veamos el uso de la propiedad align-items:center, que permite que los elementos flexibles se centren verticalmente alrededor de un eje perpendicular:
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex; -webkit-align-items: centro; align-items: centro; ancho: 700px; alto: 240px; color de fondo: verde; margen: 10px automático;) .flex-item (color de fondo: rojo; ancho: 100px; alto: 100px; margen: 5px;)
Por lo tanto, flex-start, flex-end y center siempre se colocan unidos. El valor de estiramiento es bastante simple: hace que los elementos flexibles se estiren desde el inicio cruzado hasta el final cruzado, es decir, verticalmente con respecto al contenedor flexible. La línea de base obliga a los elementos flexibles a colocarse a lo largo de la línea de base. La línea de base se calcula en función del contenido en línea de los elementos flexibles. Aquí hay una mejor explicación de cómo funcionan estos valores:
envoltura flexible
En todos los ejemplos considerados, el contenedor flexible tenía una línea flexible. El uso de la propiedad flex-wrap le permitirá crear un contenedor flexible con un número diferente de líneas flexibles. Valores posibles:
- nowrap (predeterminado)
- envoltura inversa
Si flex-wrap está configurado en wrap , se incluyen líneas flexibles adicionales en los elementos flexibles, pero solo si los elementos flexibles no tienen suficiente espacio para caber en una línea flexible. Se agregan líneas flexibles adicionales en la dirección perpendicular al eje.
Ejemplo de uso de flex-wrap:
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; ancho: 700px; alto: 240px; color de fondo: verde; margen: 10px auto;) .flex-item (color de fondo: rojo; ancho: 300px; alto: 100px; margen: 5px;)
El valor de ajuste inverso es similar al valor de ajuste, excepto que se agregan nuevas líneas flexibles en la dirección opuesta a lo largo del eje perpendicular.
alinear contenido
align-content cambia el comportamiento de la propiedad flex-wrap. Este valor es similar a align-items pero en lugar de alinear elementos flexibles, alinea líneas flexibles. Como era de esperar, los valores son similares:
- estirar (predeterminado)
- inicio flexible
- extremo flexible
- centro
- espacio entre
- espacio alrededor
El principio de funcionamiento de estos valores es similar al de justificar contenido y alinear elementos.
Ejemplo de alineación de contenido: centro
flujo flexible
Esta propiedad combina las propiedades de dirección flexible y envoltura flexible.
flujo flexible:
Contenedor flexible (-webkit-flex-flow: columna nowrap; flex-flow: columna nowrap;)
Propiedades de los elementos flexibles
Un elemento flexible es un bloque secundario de un contenedor flexible. El contenido de un contenedor flexible se refiere al elemento flexible de ese contenedor. El contenido del elemento flexible se muestra como de costumbre. Por ejemplo, mientras la propiedad flotante está vigente, los elementos flexibles no reaccionan a ella de ninguna manera. Los flotadores también se pueden ubicar dentro del propio elemento flexible.
Como dicen, los artículos flexibles tienen un tamaño principal y un tamaño cruzado. Tamaño principal es el tamaño del elemento flexible en la dirección del eje principal y Tamaño cruzado es en la dirección del eje transversal. De hecho, el ancho o alto de un elemento flexible puede ser Tamaño principal y Tamaño transversal según el eje del contenedor flexible.
Veamos las propiedades que regulan el comportamiento de los elementos flexibles.
Orden
El orden es la propiedad más simple. El orden de los elementos flexibles está determinado por la disposición de los elementos flexibles en el HTML. En este ejemplo, cambiaremos el valor de la propiedad de orden de un elemento flexible a -1 y veremos cómo esto cambia el orden de otros elementos flexibles.
Contenedor flexible ( pantalla: -webkit-flex; pantalla: flex; -webkit-flex-wrap: envolver; flex-wrap: envolver; -webkit-align-content: centro; align-content: centro; ancho: 700px; alto : 240px; color de fondo: verde; margen: 10px auto; .flex-item (color de fondo: rojo; ancho: 300px; alto: 100px; margen: 5px; ) .first ( -webkit-order: -1; orden : -1;
Esta propiedad puede ser útil para la accesibilidad cuando el orden de los elementos flexibles en HTML debe ser unidireccional, pero la visualización de los elementos flexibles debe ser en un orden diferente.
Margen
Probablemente estés familiarizado con el margen: efecto automático. Flexbox hace algo similar, pero con aún más capacidades. "auto" consume espacio extra. Esta propiedad se puede utilizar para diversos posicionamientos de elementos flexibles.
Por ejemplo, declaremos margin-right: auto;
para el primer elemento flexible, mientras que proporcionará todo el espacio libre posible a su derecha:
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex; -webkit-align-content: centro; align-content: centro; ancho: 700px; alto: 240px; color de fondo: verde; margen: 10px automático;) .flex-item (color de fondo: rojo; ancho: 100px; alto: 100px; margen: 5px; ) .flex-item:first-child( margen derecho: auto; )
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex; -webkit-align-content: centro; align-content: centro; ancho: 700px; alto: 240px; color de fondo: verde; margen: 10px automático;) .flex-item (color de fondo: rojo; ancho: 100px; alto: 100px; margen: 5px; ) .flex-item:first-child( margen: auto; )
alinearse
La propiedad align-self de un elemento anula la propiedad align-items del contenedor flexible. Posibles valores similares a align-items:
- estirar (predeterminado)
- inicio flexible
- extremo flexible
- centro
- base
En este ejemplo, asignaremos diferentes valores de propiedad align-self a los elementos:
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex; -webkit-align-content: centro; align-content: centro; ancho: 700px; alto: 240px; color de fondo: verde; margen: 10px automático;) .flex-item (color de fondo: rojo; ancho: 100 px; altura mínima: 70 px; margen: 5 px; ) .item1 ( -webkit-align-self: flex-start; align-self: flex-start; ) . item2 ( -webkit-align-self: flex-end; align-self: flex-end; ) .item3 ( -webkit-align-self: centro; align-self: centro; ) .item4 ( -webkit-align-self : línea de base; align-self: línea de base; ) .item5 ( -webkit-align-self: línea de base; align-self: línea de base; relleno: 2em 0; ) .item6 ( -webkit-align-self: estiramiento; align-self: estirar)
doblar
Finalmente llegamos a la propiedad flexible en Flexbox. Flex determina cómo los elementos flexibles utilizarán el espacio disponible a lo largo del eje principal. Consideremos cada uno de los valores posibles.
Doblar:
Esta sintaxis especifica qué parte del elemento flexible debe ocupar el ancho total del contenedor flexible. En el siguiente ejemplo, el primer elemento flexible ocupará 2/4 del espacio libre y los dos elementos flexibles restantes ocuparán 1/4 cada uno:
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex; -webkit-align-content: centro; align-content: centro; ancho: 700px; alto: 240px; color de fondo: verde; margen: 10px automático;) .flex-item (color de fondo: rojo; ancho: 100 px; altura mínima: 70 px; margen: 5 px; ) .item1 ( -webkit-flex: 2; flex: 2; ) .item2 ( -webkit-flex: 1 ; flexionar: 1; .item3 ( -webkit-flex: 1; flexionar: 1; )
A menudo hay que distribuir los elementos uniformemente a lo ancho. Para hacer esto, simplemente establezca el valor de esta propiedad en 1 y todos los elementos flexibles se distribuirán a lo ancho del contenedor.
Contenedor flexible (pantalla: -webkit-flex; pantalla: flex; -webkit-align-content: centro; align-content: centro; ancho: 700px; alto: 240px; color de fondo: verde; margen: 10px automático;) .flex-item (color de fondo: rojo; ancho: 100 px; altura mínima: 70 px; margen: 5 px; ) .item1 ( -webkit-flex: 1; flex: 1; ) .item2 ( -webkit-flex: 1 ; flexionar: 1; .item3 ( -webkit-flex: 1; flexionar: 1; )
flexión: inicial
Los elementos flexibles con este valor tendrán un ancho estrictamente fijo, pero solo si hay espacio libre (si es necesario, reduzca su tamaño, se volverá gomoso).
flexionar:automático
Los puntos de flexión se vuelven completamente de goma a lo largo del eje principal. No funciona correctamente en Chrome 23.0.1271.95, por lo que es mejor usar flex: 1.
flexión: ninguna
Los elementos flexibles se vuelven de ancho fijo en todas las situaciones.
flexión avanzada
La propiedad flex se puede usar en modo de reducción para especificar la selección de flex-grow, flex-shrink y flex-basis en una sola declaración: doblar:
En la mayoría de los casos, esta sintaxis no es necesaria. Además, aplicar este atajo requiere una comprensión profunda del modelo Flexbox. Puede hacer que cada una de las propiedades flex-grow, flex-shrink y flex-basis sean específicas. Recomiendo encarecidamente no utilizar esta abreviatura: el valor predeterminado es dar valores más razonables.
visibilidad
Cuando se implementa la propiedad de visibilidad: colapsar;
diferirá de los valores visibilidad: oculto;
y mostrar: ninguno;
para artículos flexibles. Con el valor de colapso, el elemento utilizará el tamaño cruzado del contenedor flexible, pero no afectará el espacio del eje principal. Esto puede resultar útil para agregar o eliminar dinámicamente elementos flexibles sin afectar el tamaño cruzado del contenedor flexible.
Visibilidad actual: colapso;
