Scribd
Cargar
12 vistas

Flex Box

Cargado por

dvhuelgos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
12 vistas

Flex Box

Cargado por

dvhuelgos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

i

Construcción de software orientado a servicios

“Concepto de Flex Box”

Derly Valeria Huelgos Rojas

Gonzalo Chacón

Instructor

Tecnólogo en Análisis y Desarrollo de Software

2670687

Centro Agroempresarial y Desarrollo Pecuario del Huila

SENA

Garzón – Huila
2024 ii
Introducción

En este informe, se analizará el concepto de Flexbox, pues este irrumpió en el mundo del

desarrollo web como un módulo de CSS3 que transformó la forma de crear interfaces. A

diferencia de los métodos tradicionales, Flexbox ofrece un sistema flexible y adaptable para

distribuir elementos en una página, facilitando la creación de diseños responsivos y optimizados

para diferentes pantallas.


Tabla de Contenido iii

¿Qué es Flex Box? ¿Para qué sirve?................................................................................................1


¿Qué es?.......................................................................................................................................1
Propiedades de Flex Box.................................................................................................................2
¿Por qué es importante conocer y manejar el concepto de Flex Box?............................................3
¿Qué es?.......................................................................................................................................3
Conclusión.......................................................................................................................................4
1

¿Qué es Flex Box? ¿Para qué sirve?

¿Qué es?

Flexbox, también conocido como CSS Flexible Box Layout, es un módulo de

diseño de CSS3 que revolucionó la forma de crear interfaces web. A diferencia de los

métodos tradicionales, Flexbox ofrece un sistema flexible y adaptable para distribuir

elementos en una página, facilitando la creación de diseños responsivos y optimizados

para diferentes pantallas.

¿Para qué sirve?:

 Organizar elementos de forma lineal: Disponer elementos en filas o columnas

de manera sencilla y eficiente.

 Distribuir espacio de manera inteligente: Ajustar el espacio entre elementos y

adaptarlo al tamaño de la pantalla.

 Alinear elementos con precisión: Controlar la posición horizontal y vertical de

los elementos con gran control.

 Crear diseños responsivos: Adaptar el diseño de la página a diferentes

dispositivos, desde smartphones hasta pantallas grandes.

 Simplificar código CSS: Reducir la cantidad de código necesario para crear

diseños complejos, haciendo el código más limpio y mantenible.


2

Propiedades de Flex Box

Flexbox ofrece un conjunto de propiedades que te permiten controlar diversos

aspectos del diseño:

 display: flex: Convierte un contenedor en un contenedor Flexbox.

 flex-direction: Define la dirección principal del layout (fila o columna).

 flex-wrap: Controla si los elementos se envuelven en varias líneas cuando no

caben en una sola.

 justify-content: Alinea los elementos horizontalmente en el contenedor.

 align-items: Alinea los elementos verticalmente en el contenedor.

 align-self: Alinea un elemento individualmente dentro del contenedor.

 order: Cambia el orden de los elementos sin afectar su orden en el HTML.

 flex-grow: Define cómo se distribuye el espacio adicional entre los elementos.

 flex-shrink: Define cómo se encogen los elementos para ocupar menos espacio.

 flex-basis: Establece el tamaño inicial de un elemento flexible.


3

¿Por qué es importante conocer y manejar el concepto de Flex Box?

¿Qué es?

En la actualidad, Flexbox se ha convertido en una herramienta fundamental para

el desarrollo web moderno. Su capacidad para crear diseños flexibles, responsivos y

adaptables a diferentes pantallas lo hace indispensable para crear interfaces web de

calidad.

¿Qué permite?:

 Crear diseños web más atractivos y fáciles de usar: Flexbox te brinda las

herramientas para organizar elementos de forma visualmente agradable y

optimizar la experiencia del usuario en diferentes dispositivos.

 Simplificar tu código CSS: Flexbox te permite crear diseños complejos con

menos código, haciendo tu código más limpio, mantenible y fácil de entender.

 Ahorrar tiempo y esfuerzo: Al utilizar Flexbox de manera eficiente, podrás

crear diseños web más rápido y con menos esfuerzo, optimizando tu flujo de

trabajo.

 Mantenerte actualizado con las últimas tendencias: Flexbox es un estándar

ampliamente utilizado y seguirá siendo una herramienta esencial para el diseño

web en el futuro.
4

Conclusión

En conclusión, Flexbox se ha convertido en una herramienta fundamental para el

desarrollo web moderno. Su capacidad para crear diseños flexibles, responsivos y

adaptables a diferentes pantallas lo hace indispensable para crear interfaces web de

calidad. Dominar Flexbox te permite crear diseños más atractivos, simplificar tu código

CSS, ahorrar tiempo y esfuerzo y mantenerte actualizado con las últimas tendencias. Si

aún no te has familiarizado con Flexbox, te invito a que lo hagas, ya que te permitirá

llevar tus habilidades de diseño web al siguiente nivel.

También podría gustarte