EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Flexbox, modelo de caja flexible en CSS

            Flexbox css

            Flexbox css

            Propiedades flexbox CSS

            El modelo de caja flexible o flexbox nos ofrece un mecanismo con el que dividir el espacio disponible en la ventana, y crear las filas y columnas necesarias para la implementación del diseño de una página web. Este modelo flexible no necesita utilizar los métodos tradicionales de posicionamiento de cajas (static, relative, absolute, float…) sino que organiza los elementos utilizando contenedores flexibles.

            Contenidos del artículo

            • Propiedades flexbox CSS
              • 1. display: flex
              • 2. flex-wrap: nowrap | wrap | wrap-reverse
              • 3. justify-content: flex-start | flex-end | center | space-between |space
              • 4. align-items: stretch | flex-start | flex-end | center | baseline
              • 5. flex-direction: row | row-reverse | column | column-reverse
              • 6. Otras propiedades
            • Ejemplo práctico
                • Actividad 10.

            1. display: flex

            Para utilizar las propiedades de flexbox es necesario crear un contenedor padre que configure las características de los elementos hijos. A este contenedor padre debemos declararle la propiedad «display:flex«. Veamos un ejemplo:

            #container{
                 display: flex;
            }

            Ejemplo

            0

            2. flex-wrap: nowrap | wrap | wrap-reverse

            Podemos indicar qué elementos flexibles se deben trasladar cuando no hay suficiente espacio en el contenedor mediante la propiedad flex-wrap. Sus valores son los siguientes:

            • nowrap: los elementos no pasan a la siguiente fila y se reduce su anchura para mostrarlos. Este es el valor por defecto.
            • wrap: los elementos pasan a la siguiente fila y conservan su anchura.
            • wrap-reverse: los elementos pasan a la siguiente fila, pero en sentido inverso al de su
              declaración.
            #container{
                 display: flex;
                 flex-wrap: wrap;
            }

            Ejemplo

            0

            3. justify-content: flex-start | flex-end | center | space-between |space

            La propiedad justify-content es la que define la justificación horizontal de los elementos hijos de un contenedor flexible. Esta propiedad acepta cinco valores:

            • flex-start: posiciona los elementos a la izquierda del contenedor. Valor por defecto.
            • flex-end: posiciona los elementos a la derecha del contenedor.
            • center: centra los elementos en el contenedor
            • space-between: añade un espacio idéntico entre los elementos. El primer elemento está alineado a la izquierda del contenedor, y el último, a la derecha.
            • space-around: espacia de forma regular los elementos que no están alineados a la izquierda y a la derecha del contenedor.
            #container{
                 display: flex;
                 justify-content: flex-start;
            }
            justify-content

            Ejemplo

            0

            4. align-items: stretch | flex-start | flex-end | center | baseline

            La propiedad align-items actúa sobre el eje vertical. Para utilizar esta propiedad primero se debe definir la propiedad flex-direction: row.

            La propiedad align-items acepta cinco valores:

            • stretch: los elementos se amplían verticalmente para ocupar toda la altura disponible en el contenedor. Este es el valor por defecto.
            • flex-start: los elementos se colocan en la parte superior del contenedor.
            • flex-end: los elementos se colocan en la parte inferior del contenedor.
            • center: los elementos se colocan en el centro del contenedor.
            • baseline: los elementos se alinean sobre la línea de base del texto.
            #container{
                 display: flex;
                 flex-direction: row;
                 align-items: stretch;
            }
            align-items

            Ejemplo

            0

            5. flex-direction: row | row-reverse | column | column-reverse

            La propiedad flex-direction determina la dirección principal en la que los elementos flexibles se colocan dentro de un contenedor flex. Puede establecerse para organizar los elementos en una fila (horizontal) o en una columna (vertical).

            La propiedad flex-direction acepta cuatro valores:

            • row (valor por defecto): Coloca los elementos en una fila horizontal. El inicio está a la izquierda y el final a la derecha.
            • row-reverse: Coloca los elementos en una fila horizontal, pero en orden inverso al valor por defecto. El inicio estará a la derecha y el final a la izquierda.
            • column: Coloca los elementos en una columna vertical. El inicio está arriba y el final abajo.
            • column-reverse: Coloca los elementos en una columna vertical, pero en orden inverso al valor por defecto. El inicio estará abajo y el final arriba.
            #container {
                 display: flex;
                 flex-direction: row;
               }

            Ejemplo

            0

            6. Otras propiedades

            Las propiedades de flexbox que hemos visto son las más comunes y utilizadas para controlar el comportamiento de los elementos flex. Sin embargo, hay más propiedades disponibles que te permiten tener un mayor control sobre el diseño de tus elementos flex. Algunas de estas propiedades adicionales incluyen order, flex-grow, flex-shrink, y flex-basis, entre otras. Veamos un resumen de algunas de las propiedades más utilizadas.

            PropiedadDescripciónValores Ejemplo
            displayDefine el contenedor como un flex containerflex
            flex-wrapControla si los elementos flex deben envolverse o nonowrap (por defecto), wrap, wrap-reverse
            justify-contentAlinea los elementos a lo largo del eje principalflex-start (por defecto), flex-end, center, space-between, space-around, space-evenly
            align-itemsAlinea los elementos a lo largo del eje secundariostretch (por defecto), flex-start, flex-end, center, baseline
            flex-directionEspecifica la dirección principal de los elementosrow (por defecto), row-reverse, column, column-reverse
            flex-growControla cómo los elementos flex se expandenNúmero (valor relativo)
            flex-shrinkControla cómo los elementos flex se encogenNúmero (valor relativo)
            flex-basisEstablece el tamaño inicial de los elementos flexValor, auto (por defecto)
            orderControla el orden de los elementos flex dentro del contenedorNúmero (entero)
            align-selfAlinea un elemento individual a lo largo del eje secundarioauto (por defecto), flex-start, flex-end, center, baseline, stretch
            Tabla 1. Propiedades flexbox

            Ejemplo práctico

            0

            Ejercicio propuesto

            Actividad 10.

            Utiliza el modelo de caja flexible para crear dos contenedores (o más) con elementos flexibles. Haz uso de las propiedades flex-wrap, justify-content y align-items.

            Navegación de entradas

            ← Media queries CSS para cumplir las necesidades del diseño responsive
            CSS Grid para maquetar contenido con rejillas o cuadrículas →

            Tutorial CSS Nivel Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Flexbox, modelo de caja flexible
            • 5. CSS Grid para maquetar contenido con rejillas
            • 6. Centrar horizontal y verticalmente un elemento
            • 7. Preprocesadores Less y Sass
            • 8. Prácticas CSS
            • 9. Chuleta CSS Nivel avanzado

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados