EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            propiedad overflow css
            Propiedad CSS overflow, excedente de contenido
            25/10/2019
            preprocesadores css less sass
            Preprocesadores CSS: Less y Sass
            02/11/2019

            Flexbox, modelo de caja flexible en CSS

            Flexbox css

            Flexbox css

            Tabla de contenidos

            • 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. Ejemplo práctico
            • Ejercicios propuestos

            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.

            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. Ejemplo práctico

            0

            Ejercicios propuestos

            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.

            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results