Crea diseños Flexbox perfectos
Visualice, personalice y genere código CSS flexbox con nuestra interfaz intuitiva de arrastrar y soltar.
Propiedades del
contenedor Propiedades
Preview
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Ajustes preestablecidos
Centrar horizontal y verticalmente
Perfecto para centrar un logotipo, botón o cualquier elemento tanto horizontal como verticalmente.
Espaciado
Cree un espaciado igual entre los elementos con espacio entre o espacio alrededor.
Menú
Cree un menú de navegación vertical con espaciado y alineación coherentes.
Cuadrícula
adaptable Cree un diseño de cuadrícula adaptable que ajuste los elementos en función del espacio disponible.
Estandarte
Título
Sección de héroe con llamada a la acción
Diseña un estandarte de héroe con título, subtítulo y un botón de llamada a la acción.
Diseño de
Company
About Us
Careers
Support
Centro
Contáctanos
© 2023 Generador
Crea un pie de página responsivo con columnas que se apilan en pantallas más pequeñas.
del mundo real
Barra
de navegación Un diseño de barra de navegación común con un logotipo a la izquierda, elementos de menú en el centro y un icono de carrito a la derecha.
Card Grid
Título de la tarjeta Texto
de descripción de la tarjeta aquí
Título de la tarjeta Texto
de descripción de la tarjeta aquí
Título
tarjeta Texto de descripción de la tarjeta aquí
Una cuadrícula de tarjeta receptiva que se adapta a diferentes tamaños de pantalla utilizando las propiedades de flexbox.
de diseño del
Título
del artículo Publicado el 1 de enero de 2023 · 5 min de lectura Contenido
del artículo aquí. Puede ser un breve resumen o el texto completo del artículo. Flexbox ayuda a alinear la imagen y el texto de una manera visualmente atractiva.
Un diseño de artículo común con una imagen a la izquierda y contenido de texto a la derecha, apilado en dispositivos móviles.
Diseño de panel Contenido
Un diseño de tablero con encabezado, barra lateral, área de contenido principal y pie de página utilizando flexbox para la alineación horizontal y vertical.
de carga Fundamentos de
¿Qué es Flexbox?
Flexible Box Layout, comúnmente conocido como Flexbox, es un modelo de diseño CSS3 que proporciona una forma eficiente de distribuir y alinear el espacio entre los elementos de un contenedor, incluso cuando su tamaño es desconocido o dinámico.
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
Conceptos clave:Flexbox introduce dos conceptos principales: loscontenedor and the flexibles. El contenedor es el elemento primario y los elementos son sus elementos secundarios directos.
Mamáen Axis vs Cross Axis
, los diseños de Flexbox se basan en dos ejes: elmain axis and the eje.
-
Eje principal:El eje principal a lo largo del cual se colocan los elementos flexibles. Definido por
flex-direction. - eje transversal:El eje perpendicular al eje principal. Su dirección depende de la dirección del eje principal.
Propiedades
| Property | Description |
|---|---|
display |
Define un contenedor flexible; en línea o en bloque dependiendo del valor dado. |
flex-direction |
Establece el eje principal, definiendo así la dirección en la que se colocan los elementos flexibles en el contenedor flexible. |
flex-wrap |
De forma predeterminada, todos los elementos flexibles intentarán caber en una línea. Puede cambiar eso y permitir que los elementos se ajusten según sea necesario con esta propiedad. |
justify-content |
Alinea los elementos flexibles a lo largo del eje principal de la línea actual del contenedor flexible. |
align-items |
Alinea los elementos flexibles a lo largo del eje transversal de la línea actual del contenedor flexible. |
align-content |
Alinea las líneas de un contenedor flexible cuando hay espacio adicional en el eje transversal. |
Propiedades
| Property | Description |
|---|---|
order |
del elemento De forma predeterminada, los elementos flexibles se distribuyen en el orden de origen. Sin embargo, laorderpropiedad controla el orden en el que aparecen en el contenedor flexible. |
flex-grow |
Define la capacidad de un objeto flexible para crecer si es necesario. Acepta un valor sin unidades que sirve como proporción. |
flex-shrink |
Define la capacidad de un elemento flexible para encogerse si es necesario. |
flex-basis |
Define el tamaño inicial de un elemento flexible antes de que se distribuya el espacio disponible de acuerdo con los factores flexibles. |
align-self |
Permite anular la alineación predeterminada (o la especificada poralign-items) para elementos flexibles individuales. |
Related Tools
Crea hermosos degradados CSS sin esfuerzo
Genera impresionantes degradados lineales, radiales y cónicos con nuestra interfaz intuitiva. Copia el código CSS y utilízalo en tus proyectos al instante.
Minificador CSS
Comprima y optimice su código CSS con precisión profesional
Generador de transiciones CSS3
Transición de opacidad suave
Pantone a HEX
Convierta colores Pantone a valores HEX para diseño web.
Decimal a octal
Convierte números decimales a octales sin esfuerzo
Pantone a HSV
Convierta colores Pantone a valores HSV para un control preciso del color.