👋🏼 Welcome 👋🏼

Choose your language 👅

English
Spanish

English version 🚀

Consider the following code:

CSS	HTML

What would you see in the browser ?

Click here to see the correct answer and explanation 👀

Correct Answer Explanation

A 🎉 Sometimes, setting flex-grow, flex-shrink and flex-basis separately are tiring. For the lazy programmers, I mean the efficient programmers 😜 You can set all 3 with the flex shorthand -> flex: flex-grow flex-shrink flex-basis (by default is flex: 0 1 auto). In this case, the tomato grow 1 (like the other elements), it does not shrink (because there are enoght space) and it defines an aditional size of 100px before the remaining space is distributed. Thats mean, the tomato element first has a size of 100px and the remaining space (200px) is distributed in 3 equal parts for tomato, turquoise and mediumpurple.

Correct Answer	Explanation
A 🎉	Sometimes, setting `flex-grow`, `flex-shrink` and `flex-basis` separately are tiring. For the lazy programmers, I mean the efficient programmers 😜 You can set all 3 with the flex shorthand -> `flex: flex-grow flex-shrink flex-basis` (by default is `flex: 0 1 auto`). In this case, the tomato grow 1 (like the other elements), it does not shrink (because there are enoght space) and it defines an aditional size of 100px before the remaining space is distributed. Thats mean, the tomato element first has a size of 100px and the remaining space (200px) is distributed in 3 equal parts for `tomato`, `turquoise` and `mediumpurple`.

Answer based on 👉🏼 Flex | www.samanthaming.com, Flex | MDN and A Complete Guide to Flexbox | CSS Tricks Complete code 👉🏼 Codepen | Teffcode

Spanish version 🚀

Considera el siguiente código:

CSS	HTML

¿ Qué verías en el navegador ?

Haz click aquí para ver la respuesta correcta y su explicación 👀

Respuesta correcta Explicación

A 🎉 A veces, configurar flex-grow, flex-shrink y flex-basis por separado es agotador. Para los programadores perezosos, digo, para los programadores eficientes 😜 se puede configurar los 3 con la abreviatura flex -> flex: flex-grow flex-shrink flex-basis (por defecto es flex: 0 1 auto). En este caso, tomato crece 1 (como los otros elementos), no se contrae (porque hay espacio suficiente) y define un tamaño adicional de 100px antes de que se distribuya el espacio restante. Eso significa que el elemento tomato primero tiene un tamaño de 100px y el espacio restante (200 px) se distribuye en 3 partes iguales para tomato, turquoise y mediumpurple.

Respuesta correcta	Explicación
A 🎉	A veces, configurar `flex-grow`, `flex-shrink` y `flex-basis` por separado es agotador. Para los programadores perezosos, digo, para los programadores eficientes 😜 se puede configurar los 3 con la abreviatura `flex` -> `flex: flex-grow flex-shrink flex-basis` (por defecto es `flex: 0 1 auto`). En este caso, tomato crece 1 (como los otros elementos), no se contrae (porque hay espacio suficiente) y define un tamaño adicional de 100px antes de que se distribuya el espacio restante. Eso significa que el elemento tomato primero tiene un tamaño de 100px y el espacio restante (200 px) se distribuye en 3 partes iguales para `tomato`, `turquoise` y `mediumpurple`.

Respuesta basada en 👉🏼 Flex | www.samanthaming.com, Flex | MDN and A Complete Guide to Flexbox | CSS Tricks Código completo 👉🏼 Codepen | Teffcode

teffcode/css-quiz-flex-shorthand.md

Select an option