Brief intro to Flexbox

As a web creator; either designer or developer, it’s a good weapon in your skill set for a number of reasons. Let’s see why:

The making of layouts improved with time. Starting from using tables, which are intended for tabular data and loads slowly where you don’t want to lose visitors due to performance, followed by floats which were intended for magazine-style of an image floated in text. Now there is flexbox; a 1-D layout module has been introduced to world a while ago that it became widely supported by browsers as opposed to more modern modules i.e grid layout which is a 2-D more recent layout

More flexible and easier

As a result for the previous point, the flexbox gives more flexibility and is better with performance. As well as easier to implement common layout with. 

Have you ever encountered a situation where there is a site doesn’t look as intended on a browser but looks great on the other? That is because browsers need time to adopt new tools and technologies. How is that related? Flex-box is a relatively. Although grid introduces better technique for handling layouts but still not widely supported.

It’s quite easy. You have to specify a wrapper which is going to hold a bunch of items and control their layout. You’re still asking how?! Just give that wrapper a display property with a value flex

.wrapper {
    display: flex;
}

Here you go! Simple layout tweaks could be done by adding properties to the wrapper itself as you’re telling it “let your items to be arranged in this way, or that way”. Or to the items themselves As for the wrapper, you have two famous properties “justify-content” and “align-items” which are my most used ones:

.wrapper {
    display: flex;
    Justify-content: center;
}

This one is going to center the items next to each other horizontally. The other one “align-items”:

.wrapper {
    display: flex;
    align-items: center;
}

This is going to center them vertically. And you guessed! You can have elements centered with only three properties 

With a number of elements; you are probably going to need this

.wrapper {
    display: flex;
    Flex-wrap: wrap;
}

Which means they are going to keep their width as intended no resized to fit in one line or overflow in some cases as a default when using flex

There are also some specific properties for the items themselves

This one is a shorthand for flex-grow, flex-shrink and flex-basis respectively which -as the names suggest- determine growing, shrinking and basis behaviour of items respectively.

.item {
    flex: 1 1 250px; //the defaults are 0 1 auto respectively
}

Default is 0. You can use either positive or negative values to rearrange your layout elements but be careful with text elements as they will be tricky when trying to copy them or something.

That was a small fast getting started guide. I really encourage you to check the resources in the following section to gain more understanding and to be able include more powerful and flexible properties in your implentation of the design at hand. Hope you liked it. And going to work on my writing techniques in the near future.

These are some great articles and resources I hope you find valuable as I did

1. CSS tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

2. MDN's

main article image is borrowed from the CSS tricks guide mentioned before