What Happens When You Create A Flexbox Flex Container?

What happens when you create a flex container? A container is created and other than that… at least on the surface, it’s not that much different from any other containers. The flex containers really do the job when they are with their children that are given a flex context. Flexbox is an efficient way of laying out elements and distributing space within the parent container, regardless of their size, shape, or whatever. And as it can be inferred from its name, it is flexible! It can be altered through various properties of flexbox, such as altering the children’s width and height based on their content. By default, the children are laid out in the flex containers in order from left to right, but through flex-direction or writing-mode this order can be tweaked. And also by default, the flex-wrap property is set to nowrap, however, if you change it to wrap flex items will be wrapped if necessary and its layout would also responsibly change. These are a little glimpse into what flexbox can do. So I guess the difference between flexbox and a grid would be that a grid would set out the overall structure of the content, and the flexbox would allow flexibility in minor elements. Thus, the flexbox is very efficient when you want to have fluidity within your layouts.

However, while the flexbox looks super cool, I think it’s hard to understand with only words. I have used flexbox in my previous project, but still, it’s sort of complex if I am to apply in onto one of my projects. What I did with the flexbox was that I filled in the whole screen with square sized logos in the opacity 0 and when the user hovers over the screen, the flex items gradually appear and disappear as if showing the cursor’s trace. But this was minimal utilization of flexbox, so when I was reading, a lot was new, interesting and at the same time confusing. But one thing I know for sure is that, as mentioned in to comment below,