As a web creator; either or developer, it’s a good weapon in your set for a number of reasons. Let’s see why: designer skill 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 { : flex; } .wrapper display 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: { : flex; : center; } .wrapper display Justify-content This one is going to center the items next to each other horizontally. The other one “align-items”: { : flex; : center; } .wrapper display align-items 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 { : flex; : wrap; } .wrapper display Flex-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. { : ; //the defaults are 0 1 auto respectively } .item flex 1 1 250px 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 . 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. guide References 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 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox https://medium.com/hackernoon/flexbox-s-best-kept-secret-bd3d892826b6 Disclaimer main article image is borrowed from the CSS tricks guide mentioned before
