140 reads

Brief intro to Flexbox

by Mohamed SabryJuly 4th, 2020

Too Long; Didn't Read

Flexbox is a 1-D layout module 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. Flexbox gives more flexibility and is better with performance. It’s quite easy to specify a wrapper which is going to hold a bunch of items and control their layout. You can have elements centered with only three properties: flex-grow, flex-shrink and flex-basis. You can use either positive or negative values to rearrange your layout elements.

Companies Mentioned

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:

Tool made for the purpose of layout

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.

Current standard

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.

So, getting started?

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

Why my elements look squeezed?

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

Items specific?

There are also some specific properties for the items themselves

Flex

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
}

Order

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.

Conclusion

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.