25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

 12.10.20 | Creación de páginas web (paginas-web/creacion-de-paginas-web/)

g
de-p
s.es os.e w.io
w io

CSS Flexbox: más opciones de diseño web

Las hojas de estilo en cascada (paginas-web/diseno-web/que-es-css-un-tutorial-con-lo-que-necesitas-
saber/) (CSS, Cascading Style Sheets) permiten dar el diseño adecuado a las páginas web. Si bien HTML
(paginas-web/desarrollo-web/aprende-html-tutorial-para-principiantes/) ofrece solo los elementos básicos
más importantes, mediante CSS se puede implementar un diseño web complejo: incrustar imágenes de
manera adecuada, organizar el texto o incorporar elementos de modo que destaquen en la página web.
Este útil lenguaje de marcado se desarrolla constantemente para simplificar el trabajo con las páginas web
y proporcionar a los profesionales nuevas opciones de diseño. Otro modelo de este tipo es CSS Flexbox:
una herramienta importante para diseñar las páginas web que se necesitan en la era móvil.

Índice
1. ¿Para qué sirve CSS Flexbox? (paginas-web/creacion-de-paginas-web/css-flexbox/#c244020)
2. Flexbox: tutorial para principiantes (paginas-web/creacion-de-paginas-web/css-flexbox/#c244021)

¿Para qué sirve CSS Flexbox?

Una de las principales funciones de la hoja de estilo en cascada o CSS es maquetar todos los elementos de
la página web: el texto, las imágenes y los botones se pueden organizar en detalle, determinando dónde
debe aparecer cada elemento en la pantalla hasta el más mínimo píxel. No obstante, esto solo es posible si
se conoce el tamaño de la pantalla y su relación de aspecto. En la era del Internet móvil, con su gran
variedad de opciones en ese sentido (los smartphones suelen cambiar de orientación al inclinarlos), no es
posible lograr un resultado convincente con las cajas rígidas típicas del CSS.

El flexbox (más concretamente, CSS Flexible Box Layout o diseño de caja flexible CSS) funciona de manera
más inteligente y dinámica: el diseño se adapta de forma flexible a la pantalla donde se muestra, siguiendo
el concepto del diseño receptivo. El espacio se llena o los elementos se desplazan de modo que todo
permanezca visible. Para lograrlo sin desmantelar el diseño por completo, flexbox funciona con dos ejes: el
eje principal, que suele ser el horizontal, y el eje transversal o vertical. Mediante estos ejes, los elementos
se organizan dentro de la caja y se distribuyen en relación unos con otros. Una vez hecho esto, CSS Flexbox 
no tiene más que garantizar que el espacio que hay alrededor de estos elementos se llene correctamente.

Flexbox: tutorial para principiantes

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 1/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

Cualquiera que se dedique a diseñar páginas web actualmente debería aprender a utilizar CSS Flexbox,
porque esta tecnología facilita mucho el trabajo con tamaños de pantalla variables y, gracias a su
estructura, permite lograr resultados muy atractivos con solo unas pocas líneas de código.

 Nota
Otra de las innovaciones que se introdujeron con CSS3 se denomina CSS Grid (paginas-web/creacion-
de-paginas-web/css-grid-layout/), una tecnología que ofrece a los diseñadores web otras formas de
distribuir objetos en la pantalla.

Fundamentos de CSS Flexbox

Flexbox se basa en un contenedor flexible (flex container), que a su vez contiene varios elementos flexibles
(flex items). El contenedor otorga sus propiedades a los elementos, es decir: los elementos o flexboxes
deben su flexibilidad al hecho de estar dentro del contenedor.

Cada uno de los dos ejes sigue una dirección: por lo general, el eje principal va de izquierda a derecha,
mientras que el eje transversal va de arriba a abajo. Flexbox se describe como un sistema unidimensional:
los elementos se pueden organizar en filas o columnas, y nunca se pretende combinar ambas. Por
ejemplo, si te decides por la disposición en filas (la estándar de esta tecnología), CSS Flexbox intentará
organizar todos los elementos en una sola fila, aunque también es posible evitarlo y forzar un salto de
línea.

 Nota
En el siguiente ejemplo, escribimos el código CSS directamente en el encabezado (<head>) del
documento HTML. En su lugar, también puedes crear tu propio archivo de hoja de estilo e insertarlo
en el encabezado.

Crear y organizar elementos

Antes de comenzar a organizar los elementos, primero debes crearlos. La forma de hacerlo es mediante
HTML, como de costumbre:

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 2/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

1 <!DOCTYPE html>

2 <html>

3 <head>

4 </head>

5 <body>

6 <div class="flex-container">

7 <div class="flex-item">Box 1</div>

8 <div class="flex-item">Box 2</div>

9 <div class="flex-item">Box 3</div>

10 </div>

11

12 </body>

13 </html>

Los tres elementos se mostrarían simplemente uno debajo del otro. Ahora, utilizamos CSS para
distribuirlos en el eje principal:

1 <style>

2 .flex-container {
3 display: flex;

4 background-color: grey;

5 }

6 .flex-item {
7 background-color: white;

8 width: 200px;

9 margin: 10px;

10 text-align: center;

11 line-height: 100px;

12 font-size: 50px;

13 }

14 </style>

(fileadmin/DigitalGuide/Screenshots_2020/flexbox-1.png)
Con CSS y HTML, las flexboxes pueden generarse rápidamente.

En esta hoja de estilo, se ha definido el contenedor. La propiedad display: flex habilita la flexbox. Los
elementos se distribuyen de izquierda a derecha, ya que no lo hemos definido de otra manera. También es
posible hacerlo mediante cinco opciones distintas, configurables con el comando justify-content:

flex-start: justificado a la izquierda

flex-end: justificado a la derecha

center: justificado en el centro
space-around: distribuye uniformemente el espacio alrededor de las cajas
space-between: distribuye uniformemente el espacio entre las cajas

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 3/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

El resto del código hasta este punto solo es estético y no tiene nada que ver con las cajas flexibles en sí.

El modelo CSS Flexbox parte de la alineación horizontal, aunque también es posible organizar los
elementos en una columna. Además, se puede invertir la dirección, de izquierda a derecha o de abajo a
arriba. Para ello, se utiliza el comando flex-direction:

row: de izquierda a derecha

row-reverse: de derecha a izquierda
column: de arriba abajo
column-reverse: de abajo a arriba

El comando justify-content: flex-end no es igual que flex-direction: row-reverse. Mientras que en el primero
se ajusta el último elemento al borde derecho, en el segundo, se cambia el orden completamente, lo que
significa que el primer elemento del código aparece en el borde derecho.

Agrupar elementos

Hasta ahora, hemos colocado las cajas flexibles de manera uniforme. No obstante, en diseño web, no
siempre deseamos que todos los elementos se distribuyan por igual. Por ejemplo, a veces queremos que el
texto se muestre de manera diferente a una imagen. Para lograrlo, podemos agrupar los elementos en el
texto HTML:

1 <div class="flex-container">

2 <div class="flex-item">Box 1</div>

3 <div class="flex-item">

4 <div class="flex-item">Box 2</div>

5 <div class="flex-item">Box 3</div>

6 </div>

7 </div>

(fileadmin/DigitalGuide/Screenshots_2020/flexbox-2.png)
Puedes anidar varios objetos en una flexbox ordenándolos en el documento HTML.

Desplazamiento vertical 
Con justify-content, los elementos se pueden distribuir con una cierta relación entre sí en el eje horizontal.
En cambio, si quieres que el contenido se muestre de arriba a abajo (en el eje transversal), necesitarás el
comando align-items. En este caso, también hay cinco opciones distintas:
https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 4/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

center: los objetos se centran.

flex-start: los objetos se ajustan al borde superior.
flex-end: los objetos se ajustan al borde inferior.
stretch: los objetos se muestran con el mismo tamaño.
baseline: los objetos se organizan en la línea de base (según el contenido).

A primera vista, las opciones flex-start y baseline parecen ofrecer los mismos resultados, pero presentan
una diferencia que se hace especialmente evidente cuando los objetos están anidados: mientras que flex-
start solo vincula dos flexboxes que están en el mismo nivel jerárquico, baseline también tiene en cuenta el
contenido que hay en las cajas.

Con el siguiente código, se pueden centrar tres objetos de diferentes tamaños uno al lado del otro:

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 5/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <style>

5 .flex-container {
6 display: flex;

7 background-color: grey;

8 justify-content: center;

9 align-items: center;

10 }

11 .flex-item1 {

12 background-color: white;

13 width: 200px;

14 margin: 10px;

15 text-align: center;

16 line-height: 100px;

17 font-size: 50px;

18 }

19 .flex-item2 {

20 background-color: blue;

21 width: auto;

22 margin: 10px;

23 text-align: center;

24 line-height: 100px;

25 font-size: 50px;

26 }

27 .flex-item3 {

28 background-color: grey;

29 width: 200px;

30 margin: 10px;

31 text-align: center;

32 line-height: 100px;

33 font-size: 50px;

34 </style>

35 </head>

36 <body>

37 <div class="flex-container">

38 <div class="flex-item1">Box 1</div>

39 <div class="flex-item2">

40 <div class="flex-item3">Box a</div>

41 <div class="flex-item3">Box b</div>

42 </div>

43 <div class="flex-item1">Box 2</div>

44 </div>

45 </body>

46 </html>

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 6/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

(fileadmin/DigitalGuide/Screenshots_2020/flexbox-3.png)
Con CSS Flexbox puedes decidir el aspecto de la alineación vertical de los diferentes elementos.

La distribución vertical también puede modificarse mediante saltos de línea. Si colocaras muchos objetos
en un contenedor, sencillamente se seguirían mostrando en formato horizontal, de modo que el usuario
tendría que desplazarse y salir del área de la pantalla para verlos. Con flex-wrap, te aseguras de que los
elementos se distribuyen de forma ordenada en varias líneas.

nowrap: sin salto de línea

wrap: salto de línea
wrap-reverse: salto de línea (ordenado a la inversa)

1 .flex-container {
2 display: flex;

3 background-color: grey;

4 justify-content: center;

5 align-items: center;

6 flex-wrap: wrap-reverse;

7 }

Desplazar una única flexbox

Hasta ahora, la disposición siempre se ha aplicado a todo el contenedor, de manera que todas las cajas
incluidas dentro del mismo siguen los comandos generales. Esto facilita el trabajo, pero, al mismo tiempo,
también lo limita. Por este motivo, CSS Flexbox ofrece a los diseñadores web la oportunidad de definir
excepciones. Para ello, se utiliza el comando order. El valor predeterminado (si el usuario no define otro) es
0. El valor añade el objeto a un grupo abstracto: todos los elementos que hemos creado hasta ahora
pertenecen al mismo grupo, porque todos tienen el valor 0. Partiendo de este valor, ahora puedes mover
cada objeto hacia adelante (-1) o hacia atrás (1).

Si dejas todos los elementos en valor 0 excepto uno al que le des el valor 1, este objeto se mostrará


después del resto de elementos. El objeto también puede desplazarse asignándole otros valores
(superiores o inferiores). Ten en cuenta que se trata de una representación puramente visual: la secuencia
lógica de acuerdo con el documento HTML no cambia.

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 7/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <style>

5 .flex-container {
6 display: flex;

7 background-color: grey;

8 justify-content: center;

9 align-items: center;

10 flex-direction: row;

11 }

12 .flex-item1 {

13 background-color: white;

14 width: 200px;

15 margin: 10px;

16 text-align: center;

17 line-height: 100px;

18 font-size: 50px;

19 }

20 .flex-item2 {

21 background-color: white;

22 width: 200px;

23 margin: 10px;

24 text-align: center;

25 line-height: 100px;

26 font-size: 50px;

27 order: -1;
28 }

29 </style>

30 </head>

31 <body>

32 <div class="flex-container">

33 <div class="flex-item1">Box 1</div>

34 <div class="flex-item2">Box 2 </div>

35 <div class="flex-item1">Box 3</div>

36 </div>

37 </body>

38 </html>

Tamaño flexible de los elementos

(fileadmin/DigitalGuide/Screenshots_2020/flexbox-4.png)
Puedes dejar que CSS Flexbox se encargue de la disposición de los objetos o modificarla personalmente. 
De momento solo hemos hablado de la disposición flexible de los objetos. En todos los casos, las
relaciones de tamaño se han establecido mediante el CSS clásico en el código de muestra. No obstante, las
flexboxes también pueden adaptarse en tamaño. Para ello, se utiliza el comando flex. De forma parecida al

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 8/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

orden, los elementos pueden dividirse en grupos; cuanto mayor es el valor, más espacio ocupa el
elemento.

1 .flex-container {
2 display: flex;

3 background-color: grey;

4 justify-content: center;

5 align-items: center;

6 flex-direction: row;

7 }

8 .flex-item1 {

9 background-color: white;

10 width: 200px;

11 margin: 10px;

12 text-align: center;

13 line-height: 100px;

14 font-size: 50px;

15 }

16 .flex-item2 {

17 background-color: white;

18 width: 200px;

19 margin: 10px;

20 text-align: center;

21 line-height: 100px;

22 font-size: 50px;

23 flex: 1;

24 }

De hecho, flex es una forma abreviada del comando, que contiene tres instrucciones: flex-grow, flex-shrink
y flex-basis. Así, puedes introducir los valores individuales directamente en forma abreviada (flex: <flex-
grow> <flex-shrink> <flex-basis> / flex: 1 1 20em) o determinar un solo valor y dejar que CSS se encargue
de la configuración.

(fileadmin/DigitalGuide/Screenshots_2020/flexbox-5.png)
CSS Flexbox también permite configurar las relaciones de tamaño entre los objetos.

 En resumen
Utilizar CSS Flexbox puede ahorrarnos mucho trabajo. De entrada, las cajas flexibles se distribuyen 
automáticamente en la página, aunque CSS deja mucho margen al diseñador web para modificar y
adaptar la disposición.

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 9/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS
 12.10.20 | Creación de páginas web (paginas-web/creacion-de-paginas-web/)
g
de-p
s.es os.e w.io
w io

CSS (tags/css/)

Artículos similares

(paginas-web/diseno-web/consejos-y-trucos-css-que-debes-conocer/)

Trucos CSS: snippets útiles para tu proyecto web (paginas-

web/diseno-web/consejos-y-trucos-css-que-debes-conocer/)
 07.10.2020 | Diseño web (paginas-web/diseno-web/)

Actualmente, el lenguaje de las hojas de estilo CSS es una de las herramientas de diseño web más
importantes. Este permite separar el contenido del diseño de una web y se encuentra en
constante desarrollo gracias a los esfuerzos del Word Wide Web Consortium (W3C). Los snippets
CSS facilitan de manera significativa el diseño de páginas web, asumiendo, incluso, funciones de
programas como Photoshop...

g
s.es ejos os.e w.io
onse w.io onse ejos

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 10/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

(paginas-web/diseno-web/que-es-css-un-tutorial-con-lo-que-necesitas-saber/)

Qué es CSS: tutorial introductorio a las hojas de estilo en cascada

(paginas-web/diseno-web/que-es-css-un-tutorial-con-lo-que-
necesitas-saber/)
 26.03.2019 | Diseño web (paginas-web/diseno-web/)

Sin CSS, las páginas web solo serían un compendio de elementos de texto con epígrafes y títulos
divididos en secciones. Es únicamente gracias a las posibilidades que ofrece el lenguaje de hojas
de estilo para formatear HTML que la World Wide Web es lo que es: una colorida mezcla de
proyectos web personalizados, desde la pequeña página web creada por aficionados hasta la
premiada web de diseño. De...

es-cs g
s.es eces os.e w.io
e-es w ion e-es es-cs

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 11/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

(paginas-web/desarrollo-web/less-css-tutorial/)

Less CSS: presentación y tutorial (paginas-web/desarrollo-

web/less-css-tutorial/)
 11.06.2019 | Desarrollo web (paginas-web/desarrollo-web/)

CSS es uno de los lenguajes más importantes de la World Wide Web. No obstante, trabajar con
este lenguaje de stylesheet suele resultar tedioso, por lo que muchos desarrolladores prefieren
usar Less. Este preprocesador de CSS no solo simplifica la escritura en lenguaje de hoja de estilo,
sino que le añade útiles elementos como variables, funciones o mixins. Para saber cómo funciona,
consulta...

ok.co ollo- g.co edin

s.es w.io os.e w.io
web web web

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 12/13
25/8/22, 14:50 Flexbox: tutorial y descripción de CSS Flexbox - IONOS

(paginas-web/diseno-web/css-media-queries/)

CSS Media Queries (paginas-web/diseno-web/css-media-

queries/)
 24.08.2021 | Diseño web (paginas-web/diseno-web/)

¿En qué consisten las CSS Media Queries? Explicamos cómo se relacionan las Media Queries y el
diseño responsivo y abordamos varios temas relacionados: desde breakpoints y las unidades
relativas de CSS hasta los procesadores de CSS y los modernos CSS Utility Frameworks.
Finalmente podrás disponer de una visión completa.

ok.co nos g.co edin

s.es o-we os.e w.io
b/cs w io b/cs b/cs

Productos asociados

MyWebsite

Ver tarifas 

Hosting para agencias

Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.

Ver packs 

Artículos Favoritos

s.ly/
.ly/I
ly/
os.l
-fee
uid

Empresa (https://www.ionos.es/empresa) Uso de Cookies (https://www.ionos.es/cookies)


Privacidad (https://www.ionos.es/terms-gtc/terms-privacy)
Centro de Ayuda (https://www.ionos.es/ayuda)
© 2022 IONOS Cloud S.L.U. (https://www.ionos.es)

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/ 13/13