Accentsconagua
Aquí está el primer artículo
Aquí está el siguiente artículo
El tercer artículo
El cuarto articulo
Share
Si comenzó a escribir CSS hace unos años, lo más probable es que se haya acostumbrado a algunas de las peculiaridades de los diseños de CSS que considera inevitables. Por ejemplo, usar elementos posicionados absolutamente dentro de elementos posicionados relativamente, o usar clearfix en conjunción con flotadores para lograr grillas de columnas.
Intuitivamente, todos hemos pensado que debería haber una mejor manera. Después de todo, es un poco extraño que la mejor solución para el centrado vertical haya involucrado el uso de pantalla: tabla; y estilos asociados. ¿Por qué deberíamos estar usando hacks hacer que las cosas fundamentales funcionen?
los caja flexible módulo, o flexbox para abreviar, es la solución emergente para muchos de nuestros problemas pasados, y se ajusta a una gran cantidad de patrones de diseño que se han vuelto prevalecientes. La idea básica detrás de flexbox es permitir que la caja contenedora de elementos redimensione y reordene esos elementos para que se ajusten mejor al contenedor de una manera apropiada.
Flexbox no está destinado para uso en todo el sitio necesariamente. La especificación de la cuadrícula de CSS está trabajando para solucionar ese problema, pero desafortunadamente aún se encuentra en un estado mucho menos compatible que flexbox, que tiene al menos una compatibilidad parcial en todos los navegadores, excepto en Opera Mini. En contraste, la especificación de cuadrícula de CSS solo es totalmente compatible con IE, con soporte desconocido o sin soporte en todos los demás navegadores.
Flexbox está diseñado para ser utilizado para porciones discretas de un diseño. En este artículo, cubriremos algunas tareas comunes que se pueden llevar a cabo de manera más efectiva con flexbox, y explicaremos la sintaxis de cómo logramos resultados particulares. Para obtener una descripción general completa de todas las opciones de propiedad, eche un vistazo a la publicación Trucos de CSS en Flex Box. Una guía para Flexbox.
Antes de flexbox, el centrado vertical del contenido dinámico no era una tarea trivial. (Consulta esta publicación de Smashing Mag y este artículo de CSS-Tricks para ver el cuento completo). Con Flexbox, todo es más fácil. Prepararemos un contenedor básico con elementos hijos..
Centro de pruebas verticalUna prueba secundariaTerciario es para tres
Nuestro objetivo es centrar estos elementos vertical y horizontalmente. Con flexbox, es tan simple como lo siguiente:
.contenedor ancho: 500px; altura: 500px; margen: 0 auto; color de fondo: #dedede; / * Reglas flexibles * / display: flex; flex-flow: columna nowrap; justificar-contenido: centro; alinear-elementos: centro;
Nota: que no estamos usando las versiones prefijadas del vendedor, ¡pero usted debería! Alternativamente, echa un vistazo a Autoprefixer.
Habrás notado algunas nuevas reglas desconocidas aplicadas aquí; Flexbox es un módulo que comprende una serie de propiedades. Para empezar, el pantalla: flex crea nuestro contenedor flexbox y sus elementos secundarios se tratan automáticamente como elementos flexibles.
A menos que indiquemos lo contrario, nuestros elementos flexibles fluirán en línea a lo largo del eje principal. sin embargo, flujo flexible (que es taquigrafía para el dirección flexible y envoltura flexible propiedades) pueden alterar tanto el eje principal como el transversal. flex-flow: columna nowrap le dice a flexbox que queremos que nuestro contenido se muestre en una columna vertical, y que no queremos que nuestros elementos se ajusten (obligándolos a saltar a la siguiente fila).
justificar el contenido a centrar, que alinea nuestros elementos con el centro del eje principal, que se basa en la dirección definida por el flujo flexible, En este caso el eje vertical.. alinear-elementos: centro alinea nuestros elementos en relación con el eje secundario ("cruz").
Existe un problema inherente con un enfoque tradicional del diseño, especialmente cuando se trata de contenido sensible. Cuando se utilizan flotadores, por ejemplo, es fácil ver el contenido de una página en un orden totalmente diferente del que es natural o cognitivo. Además, es muy difícil manipular el orden de los elementos en una página. Con flexbox, vamos a abordar uno de los diseños más difíciles de lograr para el CSS tradicional; Un apilamiento de elementos alineado en orden inverso. Así, en otras palabras, el elemento que aparece. primero en el marcado aparecerá último En la pantalla, y al agregar nuevos elementos a la parte inferior del marcado, aparecerán en la parte superior de la pantalla..
Usaremos este marcado:
Con el siguiente CSS, podemos lograr lo que estamos tratando de hacer fácilmente.
principal posición: relativo; altura: 100%; pantalla: flexión; flex-flow: columna-reverso nowrap; justificar contenido: flex-end; alinear-elementos: centro;
Esto nos dará exactamente lo que buscamos. Vea los resultados (con algunos estilos adicionales para facilitar la visualización) aquí.
Al crear una columna inversa en la flujo flexible, Estamos pidiendo a flexbox que invierta el orden de los artículos. Queremos alinear el contenido al final de la línea cruzada de flexbox, que en el caso de la columna invertida es una línea vertical que va desde la parte inferior de la caja hasta la parte superior..
También establecemos alinear-elementos: centro Centrar los elementos en la columna horizontalmente. Esto es útil para cualquier tipo de apilamiento de elementos, donde el orden cognitivo (primero al último) no coincide con el orden visual (de arriba a abajo).
Hay muchas situaciones en las que necesita reordenar elementos según el tamaño de su pantalla. Las soluciones comunes a este problema generalmente son complicadas o repiten el marcado. Mire este ejemplo, donde hemos movido una imagen destacada de estar en el flujo de un artículo al principio del artículo usando el simple orden propiedad. Usamos el siguiente HTML:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eum repudiandae ullam ipsum repellendus officiis eaque unde aut ea porro accusamus placeat earum qui quia quidem totam harum odit voluptates?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem provident voluptas commodi atque. Consequatur non natus earum nobis exercitationem sapiente dolorem explicabo asperiores soluta unde est voluptatibus fugit officia quo.
Y el CSS que lo acompaña:
main display: flex; flex-flow: envoltura de fila; img flex-grow: 1; ancho: 200px; orden: 3; p flex: 1 auto; orden: 1; relleno: 10px; color de fondo: #dedede; margen: 0; p: nth-child (3) orden: 2; flex: 3 0 50px; Pantalla solo @media y (ancho máximo: 600 px) img orden: 1; p flex: 1 auto; orden: 2; relleno: 10px; color de fondo: #dedede; margen: 0; p: nth-child (3) orden: 3; flex: 3 0 50px;
Esto es solo la punta del iceberg cuando se trata de la potencia que proporciona flexbox para hacer en muy pocas líneas de código, lo que comúnmente es mucho más difícil de lograr..
¿Cuántas veces te has sentido frustrado por la imposibilidad de hacer 100/3 y, posteriormente, recurrir a la creación de columnas con un 99,9% de ancho, solo para darte cuenta de lo deficiente que es una solución? Flexbox soluciona este problema de una vez por todas. Tome el marcado:
PruebasPruebasPruebas
Y añada el CSS para que aparezcan las tres columnas, perfectamente calculadas..
.contenedor display: flex; justificar-contenido: centro; alinear-contenido: espacio intermedio; color de fondo: #dadada; .column ancho: 100%; relleno: 50px; text-align: center; box-shadow: 0 0 10px # c0c0c0;
¿Quieres un poco de gutter? No hay problema. Simplemente añada margen a su .columna clase. Los cálculos para el espaciado adecuado están hechos para usted..
Echa un vistazo a la increíble repo de GitHub "Solved By Flexbox" para ver más ejemplos. Flexbox es un módulo masivamente poderoso, ya que esperamos que se haya probado en este artículo. ¿Cuáles son otros casos de uso poderosos y emocionantes que ves para flexbox? Háganos saber en los comentarios.!
