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
Genera transformaciones CSS3 con facilidad
Una herramienta potente e intuitiva para crear transformaciones CSS3 complejas sin necesidad de escribir código. Visualiza los cambios en tiempo real y copia el CSS generado para utilizarlo en tus proyectos.
Conversor de stylus a CSS
Transforma tu código SCSS en CSS. Rápido, fácil y seguro.
Convertidor de SCSS a CSS
Transforme su código SCSS en CSS. Rápido, fácil y seguro.
Generador de radio de borde
Una herramienta generadora de CSS para radios de borde que permite generar rápidamente declaraciones CSS para radios de borde.
Herramienta de codificación Base64
Codifica texto al formato Base64 fácilmente en tu navegador.
Convertidor de longitud
Convierta entre diferentes unidades de longitud con facilidad y precisión. Perfecto para el uso diario y aplicaciones profesionales.