As the weeks pass, I still think Interactive Design is one of the most difficult classes I have ever encountered. This coming from a women that studied Physics with her dad as a teacher (contrary to what might people think, he was even tougher with me than with other people and he was known as the toughest teacher at school).
The past few weeks we have been looking at Flexbox, which is a whole new world on CSS. As I have said it numerous times in this blog, it is easier for me to write everything down for me to seriously understand what on earth I have to do.
Flexbox has one aim, and it is to provide a more efficient way of creating layouts, aligning and distributing the space of some items in a container. The word flex, from flexible, states that it is not necessary to know the size of the item in the container for the layout to be created.
The flex layout gives the container the ability to change the width, height and even order of an item or a set of items to best fill the space available. This is very helpful when the website is going to be viewed in different screens with different sizes and display devices. A container or a flex container changes it size to fill the available free space or shrinks them to be responsive to the screen. Perhaps the most important characteristic is that Flexbox is “direction-agnostic” in more simple terms, the layout is not restrained to vertical or horizontal directions.
Flexbox is a whole module and not a single property and it has a lot of properties on its own. Some of them are meant to be part of the flex container, or parent container, and the others are set on the flex items or children items.
Understanding Flexbox is like understanding a whole new interface of a software. It has two different axis that allows the user to understand where the things are going to be located and oriented depending on the axis. The image below explains what each component of the interface is.
Other elements such as the flex-direction, flex-wrap, justify-content, align-items, and align-content, all affect the display for the flex container or the parent. Some images below explain this a little better.
Some properties for the flex item or the children are order, flex-grow, flex-shrink, flex-basis, align-self. These images explain this part a little better.
This is what we are working on class at the moment and this is how the code is starting to look. A lot more has to be added to have it ready for our next assignment, but it's getting there, slow but steady.
If you want to read more about Flexbox, here is the link to the website where I found all of these images, they are the masters in explaining what Flexbox is:
Comments