Introducción a Flex Box (CSS)

En este artículo hablaremos sobre el funcionamiento de Flex Box o modelo “caja flexible”. Además veremos de una manera super práctica los beneficios, la sencillez y el potencial que nos supone el trabajar con este modelo de caja flexible.

Existen dos tipos de elementos dentro de flex:

  • Elemento padre o contenedor (flex container): es el elemento que engloba a todos los elementos de su interior.
  • Elemento hijo o items (flex items): son los elementos que están englobados dentro del elemento padre.

En este artículo, además de ver el funcionamiento de Flex. Veremos algunas propiedades que aplicaremos directamente al contenedor padre para ver cómo reaccionan los elementos hijos.

Creando el elemento padre (display: flex)

Flex box trabaja mediante a un elemento contenedor que engloba al resto de etiquetas de un documento. Por ello, primeramente, creamos el elemento contenedor:

Y creamos un CSS en el que añadimos un background-color y la propiedad display con valor flex:

El resultante será:

Creando los elementos hijos (contenidos)

Una vez creado el elemento padre, vamos a crear los elementos hijos de este elemento contenedor “padre” (la caja flexible). Estos elementos hijos pueden ajustarse son flexibles (veremos que significa un poco más abajo).

Para el ejemplo, vamos a crear 3 elementos hijos, concretamente 3 divs:

Y vamos a empezar a dar un poco de formato a todo mediante a CSS:

El resultante será:

Ya tenemos por tanto nuestro contenedor y nuestros items hijos, por lo que, ya tenemos todo listo para empezar.

Comprobando la flexibilidad de los elementos

Hasta ahora hemos hablado de flex diciendo que es flexible pero no lo hemos demostrado. Vamos a hacerle una prueba de flexibilidad a nuestro contenedor para verificar el comportamiento de los elementos del interior de nuestro contenedor. Y verificar que sí que son flexibles y que se intentan adaptar/ajustar en medida de lo posible a las dimensiones de su contenedor padre.

Vamos a verlo:

Si vamos reduciendo el ancho de nuestra página(abriendo el inspector y reduciendo el espacio del navegador), podemos ver como se adaptan al contendor nuestros divs hijos.

Flex-wrap de Flex

En el apartado anterior acabamos de testear el concepto de flexibilidad de los elementos y como se adapta a la resolución de pantalla. Pero imaginaros que quisiéramos que estos se adapten al contenedor principal sin perder su aspecto inicial ¿Cómo lo haríamos? Utilizando flex-wrap.

Vamos a ver unos ejemplos:

  • Wrap: los elementos hijos se ajustan al elemento padre manteniendo sus dimensiones, pero desplazándose sobre el eje vertical. Por tanto, mantendrán sus dimensiones iniciales, pero modificar su posicionamiento (bajando los elementos empezando por la derecha).

  • Nowrap: los elementos hijos se ajustan al elemento padre reduciendo sus dimensiones. Por tanto, modificaran sus dimensiones, pero mantendrán su posicionamiento actual.

  • Wrap-reverse: los elementos hijos se posicionan invertidos respecto al wrap normal y, por tanto, se posicionan lo más abajo posible respeto al contenedor padre. Además, cuando reducimos el contenedor esta vez subirán hacía arriba empezando siempre por el elemento más a la derecha. Por tanto, mantendrán sus dimensiones iniciales pero modificarán su posicionamiento inicial (subiendo los elementos de más a la derecha posible).

Flex-direction de Flex:

Flex direction nos permite indicar como se van a posicionar los elementos hijos del contenedor principal. Si lo van a hacer en línea (horizontal) o en bloque (vertical).

Vamos a verla en acción:

  • Column: nos posiciona los elementos contenidos (hijos) en columnas. Además de lo más a la izquierda y lo más arriba posible respeto el contenedor (padre).

  • Column-reverse: nos posiciona los elementos contenidos (hijos) en columnas. Además de lo más a la izquierda y lo más abajo posible respeto el contenedor (padre).

  • Row: nos posiciona los elementos contenidos (hijos) en fila. Además de lo más arriba posible y lo más a la izquierda posible respeto a su elemento contenedor (padre).

  • Row-reverse: nos posiciona los elementos contenidos (hijos) en fila. Además de lo más arriba posible y lo más a la izquierda posible respeto a su elemento contenedor (padre).

Justify-content de Flex

La propiedad justify-content nos permite trabajar en el eje horizontal.

Vamos a ver los diferentes comportamientos de justify-content con diferentes valores:

  • flex-start: es el por defecto, se nos verá igual que si no lo definimos. Por lo que, si queremos que actúen así no hará falta definirlo. Nos posicionaran los elementos hijos lo más a la izquierda posible.

  • flex-end: nos posicionaran los elementos hijos lo más a la derecha posible.

  • center: nos posicionaran los elementos hijos en el centro.

  • space-between: posiciona los elementos a lo largo de contenedor principal.

  • space-around: posiciona los elementos a lo largo del contenedor principal dejando más margen entre los elementos hijos que entre los márgenes laterales.

  • space-evenly: posiciona los elementos a lo largo del contenedor principal dejando el mismo margen entre los elementos hijos que en los margenes laterales.


Align-items de Flex

La propiedad align-items nos permite trabajar en el eje vertical.

Vamos a verla en acción:

  • Center: nos centrará el elemento hijo verticalmente en medio del contenedor padre.

  • Flex-end: nos posicionará elemento hijo lo más abajo posible respeto al eje vertical del contenedor padre.
  • Flex-start: nos posicionará elemento hijo lo más arriba posible respeto al eje vertical del contenedor padre.

  • Stretch: si eliminamos las dimensiones de nuestros divs hijos (ya que si las tenemos definidas las respetará). Stretch, nos permite que nuestros divs hijos se estiren hasta el punto en el que completen el tamaño de nuestro contenedor padre.

  • Baseline: los elementos están alineados justo como si todos estubieran escritos en una misma línea como un de un cuaderno con líneas se tratará.

Ejercicio final

Imaginaos que queremos hacer lo siguiente:

Y que cuando reduzcamos el tamaño del contenedor padre haga el siguiente comportamiento:

¿Cómo hacemos esto? Pues combinando varias de las propiedades de Flex de las que acabamos de ver sobre el contenedor padre para que afecte a sus hijos.

Vamos a ver el código:

Con este ejemplo, acabamos de ver la potencia que tiene Flex Box cuando combinamos varias propiedades. Espero haber cumplido el objetivo de familiarizaros con el tema de Flex y que con ello quede un poco más claro. Un saludo y hasta la próxima 🙂

 

 

24 comentarios

  1. Please let me know if you’re looking for a article author for your site.
    You have some really great posts and I think I would be a good asset.
    If you ever want to take some of the load off, I’d love
    to write some material for your blog in exchange for a link back to mine.

    Please send me an email if interested. Regards!

  2. Great weblog here! Also your site so much up fast! What host are you the use of?
    Can I am getting your associate link to your host?
    I wish my web site loaded up as quickly as yours lol

  3. Hey would you mind letting me know which hosting company you’re working
    with? I’ve loaded your blog in 3 different internet browsers and I must say this blog loads a lot faster then most.
    Can you recommend a good internet hosting provider at a honest price?
    Cheers, I appreciate it!

  4. I would like to thank you for the efforts you have put in writing this website.
    I’m hoping to see the same high-grade content from you
    later on as well. In fact, your creative writing abilities has encouraged me to get my very own website now 😉

    Look into my page :: Pure CBD Softgels Reviews (demos.gamer-templates.de)

  5. Hеllo to every one, the contеnts preѕent att thos site are really awesome for
    peoрⅼe knowledge, well, keep up the gpoԁ work fellows.

    My website :: vintage shirt

  6. Its like you read my mind! You seem to know a lot about
    this, like you wrote the book in it or something.

    I think that you could do with some pics to drive the message home a
    bit, but other than that, this is great blog. A fantastic read.
    I’ll definitely be back.

    my website; Viking XL Keto

  7. Howdy! Someone in my Facebook group shared this site with us so I came to check it out.
    I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers!
    Wonderful blog and wonderful design and style.

    Check out my homepage – TestoXmen

  8. As I website owner I believe the written content here is real great,
    thank you for your efforts.

    my homepage: Optimum Keto Ingredients

  9. I am regular reader, how are you everybody? This post posted at this website is really pleasant.

    Feel free to visit my website … Renew Brite Advanced Teeth Whitening

  10. Rattling clear website, thank you for this post.

    My page Insights CBD Gummies

  11. I’m now not sure the plɑce you’re getting your info,
    but grfeat topic. I needs to spend a while learning more or ԝorking оut more.
    Thank you ffor great information I waas looking for thiks
    info for my mission.

    Feel free too visit my site meja sekolah

  12. Great post. I was checking continuously this blog and I’m impressed!
    Very useful information specifically the last part 🙂 I care for such information much.
    I was seeking this certain info for a long time. Thank you and best of luck.

  13. Hello to every one, the contents existing at this web page are in fact remarkable for people knowledge, well, keep
    up the good work fellows.

  14. Hello colleagues, how is all, and what you want to say about
    this piece of writing, in my view its in fact amazing in favor of
    me.

  15. There is definately a lot to find out about this topic.
    I really like all of the points you made.

    Feel free to visit my website UltraXTend

  16. I visit each day a few websites and information sites to read
    content, except this blog gives quality based content.

    My page – Arctic Box Air Cooler

  17. I actually wanted to send a small remark in order to say thanks to you for those splendid pointers you
    are giving out on this site. My long internet look up has at the end been recognized with awesome
    tips to go over with my family and friends. I would mention that many of
    us visitors are undoubtedly lucky to live in a fantastic
    website with very many brilliant people with interesting ideas.

    I feel truly grateful to have seen the web site and look forward to many more fabulous moments reading here.
    Thanks a lot again for a lot of things.

    Feel free to surf to my blog post :: polywebhost.com

  18. Heya i am for the first time here. I found this board and I find It truly useful & it helped me out a lot.
    I hope to give something back and aid others like you aided me.

    Also visit my blog post :: ArcticBox Air Cooler

  19. Some truly tremendous work on behalf of the owner of this website, absolutely outstanding content.

    Feel free to surf to my blog post – https://polywebhost.com/

  20. Thanks for the auspicious writeup. It in truth was once a
    enjoyment account it. Look complicated to more delivered agreeable from you!
    By the way, how could we keep up a correspondence?

    my homepage http://forum.m2clasic.ro/viewtopic.php?id=74190

  21. There’s certainly a lot to find out about
    this issue. I like all of the points you made.

  22. Существенные достоинства онлайн-клуба:

    разнообразный выбор развлечений азартной тематики (слоты, рулетки, покер блэкджек в
    формате лайв, прием ставок на спортивные дисциплины, призовые
    турниры и лотерейные билеты);

    частое пополнение коллекции игр;
    призовая программа для гэмблеров разных уровней;
    возможность играть в демо-режиме;
    доступность скачиваемого клиента для смартфонов.

  23. Excellent read, I just passed this onto a friend who was doing some research on that.
    And he actually bought me lunch since I found it
    for him smile Therefore let me rephrase that: Thanks for lunch!

    Also visit my blog – TestoXmen

  24. I carry on listening to the newscast speak about
    getting free online grant applications so I have been looking around for the top site to get one.

    Could you tell me please, where could i acquire some?

    Also visit my site … Marcelino

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar