6.5 KiB
| title | localeTitle |
|---|---|
| CSS Flexbox Tips and Tricks | CSS Flexbox Consejos y trucos |
CSS Flexbox
CSS Flexbox nos permite formatear fácilmente nuestro HTML como nunca antes había sabido que era posible. Con flexbox es posible alinear vertical y horizontalmente, fácilmente. ¿Como el sonido de eso? Sí yo también.
También es fantástico para el diseño general de su sitio web o aplicación, es fácil de aprender, tiene un buen soporte (en todos los navegadores modernos) y es excelente para trabajar, por no mencionar que no se tarda mucho en comprenderlo. !
Flexbox
Aquí hay una lista de las propiedades de flexbox que se pueden usar para colocar elementos en css:
CSS que puede ser aplicado al contenedor.
display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <'flex-direction'> || <'flex-wrap'>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
CSS que se puede aplicar a elementos / elementos en el contenedor
order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Así que ahora tienes tu caja de herramientas pero preguntas "¿Qué hago con mis herramientas, cómo uso estas?", Déjame mostrarte.
Display Flex
display: flex; es solo para decirle a su navegador, hey, me gustaría usar flexbox con este contenedor, por favor. Esto inicializará este cuadro como un contenedor flexible y aplicará algunas propiedades de flexión predeterminadas.
Así es como se ve el contenedor sin display: flex;
Después de añadir display: flex; obtenemos lo siguiente, las propiedades de flexión predeterminadas se aplican haciendo que se muestre como tal
Dirección de flexión
flex-direction: nos permite controlar cómo se muestran los elementos en el contenedor, ¿los quiere de izquierda a derecha, de derecha a izquierda, de arriba a abajo o de abajo a arriba? Puede hacer todo esto fácilmente configurando la dirección de flexión del contenedor.
Flexbox aplica fila como el predeterminado para la dirección. Aquí es cómo se ven todos:
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Flex Wrap
De manera predeterminada, Flexbox intentará ajustar todos los elementos en una fila, pero puede cambiar esto con la propiedad flex-wrap, esto le permite establecer si los elementos se extenderán o no, hay 3 propiedades para flex-wrap:
flex-wrap: nowrap este es el ajuste por defecto y buscará que encaje todo en una fila de izquierda a derecha.
flex-wrap: wrap esto permitirá que los elementos continúen creando múltiples filas y de izquierda a derecha.
flex-wrap: wrap-reverse permite que los elementos estén en varias filas, pero esta vez se muestran de derecha a izquierda.
Flujo flexible
Flex flow combina el uso de flex-wrap y flex-direction en una sola propiedad, primero se usa configurando la dirección y luego la envoltura.
flex-flow: column wrap; Es un ejemplo si cómo usar esto.
Justificar contenido
justify-content es una propiedad para alinear elementos en el contenedor a lo largo del eje principal (esto cambia según la forma en que se muestra el contenido). Existen múltiples opciones para esto y nos permite llenar cualquier espacio vacío en las filas pero definiendo cómo queremos "justificarlo".
Estas son nuestras opciones cuando justificamos nuestro contenido flex-start | flex-end | center | space-between | space-around; .
Alinear elementos
Alinear elementos nos permite alinear elementos a lo largo del eje transversal. Esto permite posicionar el contenido de muchas maneras diferentes utilizando el contenido justificado y alineando los elementos.
align-items: flex-start | flex-end | center | baseline | stretch;
Alinear contenido
Esto es para alinear elementos con múltiples líneas, es para alinear en el eje transversal y no tendrá efecto en el contenido que es una línea.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Juegos y apps
Flexbox Defense es un juego web que enseña flexbox de una manera divertida.
Flexbox Froggy es también un juego web que enseña flexbox de forma divertida.
Flexbox in 5 es una aplicación web que le permite ver cómo funciona flexbox con unos pocos controles simples.
Flexyboxes es una aplicación que también le permite ver ejemplos de código y cambiar parámetros para ver cómo funciona flexbox visualmente.
Flexbox Patters es un sitio web que muestra un montón de ejemplos de flexbox
Documentación
Red de desarrolladores de Mozilla