Instagram | Twitter | LinkedIn
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. |
Answer based on 👉🏼 Flex | www.samanthaming.com, Flex | MDN and A Complete Guide to Flexbox | CSS Tricks Complete code 👉🏼 Codepen | Teffcode
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 basada en 👉🏼 Flex | www.samanthaming.com, Flex | MDN and A Complete Guide to Flexbox | CSS Tricks Código completo 👉🏼 Codepen | Teffcode