A Guide To Flexbox

I have said it on one of my previous blogs, I have been very interested to learn more css tricks and one that has been an interest of mine has been the use of flexbox. I realized that I have to hone my css skills a bit more and this is a technique that a young front end developer should know. I want to touch base briefly on some basics and some properties of flexbox.

A flexbox is just a technique on how to organize items on the page so they are aware of one another. Flex layout is very important for larger projects or projects that will be resized like a page that will be viewed on a mobile device or a on a desktop computer. The difference between flex and grid layouts derives from its usage. Flex is better for looking at components whereas grid is best for a a general layout of the page. This is a pretty reduced description but it has helped me understand the basics of flex containers.

Properties are a major part of any CSS property. Just selecting display: flex wont be enough to organize your page. Being able to set your order is a basic technique. Flex containers order can be set as a property. Setting a child element’s order as order: 2 will mean that any other number smaller than it (negatives as well) will go to the left of it. Inversely, bigger numbers will go to the right. You can change that order with setting flex-direction: row-reverse. Rows will go horizontally but you can set flex-direction: column to set the flex items to stack vertically. You also have the ability to tell the items where they want to start. By using align-items, you can set whether you want the items to start at the top of the box, center, bottom or stretch. This allows a customization on how the items will be arranged with default being stretch to the container. If you have a multi-lined flex container, you can use align-content to tell your multi-lined flexbox how to be arranged. Same principles as align-items.

There is so much more to flex containers but I felt like these were some really good ones to touch base on. Once you get a feeling for the basic principles, you can tweak with properties to get the perfect layout even when you are viewing it on different platforms. Take care and happy coding friends!