I’m excited to show you all of this!
“You must either modify your dreams or magnify your skills.” (Jim Rohn)
What is Flexbox?
Flexbox is a system of flexible elements that comes with the idea of forgetting old mechanisms such as positioning (static, relative, absolute …), elements in line or block (and derivatives) or float. Flexbox is a more powerful, clean and customizable mechanics, in which HTML elements are automatically adapted and placed. It allows you to place the elements of a page so that they behave in a predictable manner when the design of the page should accommodate different screen sizes and different devices.
What characterizes a flexible design is its ability to alter the width and height of its elements to best fit the space available on any device. A flexible container expands its elements to fill the free space, or compresses them to avoid exceeding the planned area.
The algorithm of the design model of “flexible boxes” does not start from any predetermined direction, unlike what happens with the “block” model, which assumes a vertical arrangement of the elements, or what happens with the “online” model, which assumes a horizontal arrangement.
Vocabulary & Properties
The “parent” element that contains the flexible elements. A flexible container is defined using the flex or inline-flex values in the display property.
Each child of a flex container becomes a flexible element. If there is text directly included in the flexible container, it is automatically wrapped in an anonymous flexible element.
Each “flexible box” design follows two axes. The main axis is the axis along which the flexible elements follow one another. The secondary axis is the axis perpendicular to the main axis.
Parent or Container Properties
Flex-direction. This property controls the direction in which the flex-items are laid along the main axis. It may take on any four values:
flex-direction: row | column | row-reverse |column-reverse;
Flex-wrap. This property controls how container adapts to fit all children. With the property flex-wrap: wrap; If there is no space available within the flexible container and there are no flexible elements in their default widths, the children (elements) breaks into multiple lines. Otherwise, a flex container will keep on accommodating more flex items on a single line. The flex-wrap property can take on any three values:
flex-wrap: wrap | nowrap | wrap-reverse;
Flex-flow. Multiple values declared in one line. It is a shorthand property which involves flex-direction and Flex-wrap in the same command. There are different combinations:. flex-flow: row nowrap, flex-flow: column wrap, flex-flow: column nowrap.
flex-flow: row nowrap |column wrap |column nowrap;
Justify-content. The justify-content property defines how flexible elements are arranged along the main axis in the current line. In that way flex-start will order the elements to stay at the start of the content while flex end will settle them at the end and so on. More info in this article.
justify-content: flex-start | flex-end | center | space-between | space-around
Align-items. The align-items property defines how flexible elements are arranged along the secondary axis of the current line. The default value is stretch. This will “stretch” the flex-items so they fill the entire height of the flex container. Examples.
align-items: flex-start |flex-end | center | stretch | baseline
Align-content. The align-content property is used on multi-line flex-containers. By definition, it controls how the flex-items are aligned in a multi-line flex container. Examples.
align-items: flex-start |flex-end | center | stretch
Child or Element Properties
I hope you are still alive! I know it looks like it is a lot, but once you start using this daily you will realize how fascinating flex box is and how much easier it makes our lives.
Here are the properties for the element:
Firstly, we have the flex-grow property to indicate the growth factor of the items if they do not have a specific width. For example, if with flex-grow we indicate a value of 1 to all its items, each one of them would have the same size. But if we put a value of 1 to all the elements, except for one of them, which we indicate 2, that item will be larger than the previous ones. The items to which no value is specified will have a default value of 0.
Picture from getflywheel.com
Secondly, flex-shrink does just the opposite of the previous one, applies a decrease factor. In this way, items that have a larger numerical value will be smaller and vice versa.
Also, we have the flex-basis property, which defines the default size (base) that the items will have before applying the space distribution. Generally, a size is applied (units, percentages, etc.), but you can also apply the keyword content that automatically adjusts the size to the content of the item, which is its default value.
*There is a property called flex that serves as a shortcut for these three properties. It works in the following way:
/ * flex: <flex-grow> <flex-shrink> <flex-basis> * /
flex: 1 3 35%;
Lastly, order that allows to reorder the flex items within a container. Basically, you can move a flex-item from one position to another. This is done without affecting the source code in HTML.
How does it work?
Thats the question that everyone has in mind, and the answer is much simpler than you think.
To start using the Flexbox model, all you need to do is first define a flex-container. So, to find a way to explain I will give you this example in HTML:
Create a simple list of items taking this form:
As you can see there is a “ul” element as “the parent element”, and “li” as “the child element”.
To make Flexbox work you have to set in CSS “display:flex;” or “display: inline-flex” in the parent element. And give some properties like width, height and color to the childs element just to know what happens.
See? It’s that simple, and from there you’re all set to use the Flexbox model.
Remember that “<li>” elements are by nature block elements, which means they stack vertically. However, you can immediately see a change in layout, the list elements are now stacked horizontally, from left to right. Just like they would if you used float.
This video helped me to clarify my ideas about Flexbox. Hopefully it will help you too.
Do you want to try it now?
Play these Games Online;
Let’s allow our imagination fly the boat!♀