My experience with flex layout began with a lot of frustration and curse words. No matter how I tried to visualise those boxes in my mind I just couldn't apply those principles to the elements I had already built. I hope today I can try to provide some advice on how I was able to tackle using and applying flex into my everyday workflow with confidence. I am a UX/UI developer working for nerd.vision working primarily with Angular. This guide will be from experience, so I will be showing examples and code from a typical angular workflow.

‍

What is Flex

The FlexBox module was designed to provide a simple (bad choice of words) way of being able to place, align and distribute space between css elements on a page. It also provides a way to define how the element will respond when the size of the content or page around it changes. For the purposes of this article I will presume you have set up Angular's flex module, but if you haven't the documentation is listed below.

‍

Setting up FlexLayout with angular

https://github.com/angular/flex-layout

‍

The demo playground

https://tburleson-layouts-demos.firebaseapp.com/#/docs

‍

The Basics

What I found after working with flex for some time, is that the basics of flex can get you through a lot of situations. I am going to give a quick overview of what they do and how they work.

‍

fxFlex

This allows you to provide the width or height of the element. There is a number of ways you can do this, its possible to provide a percentage of the parent width for it to take up, a fixed pixel width, a calculated width or leaving it as fxFlex will take up the available space.

‍

fxLayout

This allows you to specify the children and the alignment of each one. For example specifying column will flex the child components to be in a column

‍

fxLayoutAlign

This provides you with the ability to align the contents inside the child component. For example, if you have text sitting inside this div, you can now align the text to the center of its parent.

‍

There is a number of other features that flex provides but these ones I was able to use regularly and after a time, with great accuracy.

‍

Some things I learnt along the way

So my advice to anyone just getting started with flex. I found the easiest way to understand and figure out how to use this powerful feature, was to build the layout first. This seems like simple advice but just going through this process helped me to better understand that my flex was functioning correctly before progressing with a component.

I would begin by building blocks of colour. A tip I learnt on how to set up the stage is to include this css on the component you are flexing.

This would ensure you are not getting some strange cases where the flex seems to not be functioning due to the parent component not being the correct width.

‍

Then I would start by setting out my divs. Pop a simple background colour with some inline css and start flexing

This allows me to see the results very clearly as to what the flex is doing. I was able to position my layout and learn about how the flex is reacting at the same time. After getting the layout correct, simply remove the inline style and pop in your content. Very simple but it really helped me visualise and save time when building with flex.

The result shows the two inner divs being evenly divided into columns within the constraints of the parent container. I added a flexLayoutGap so you can see the parent container (red) behind the two inner divs.

‍

One of the key points I had to understand to be able to work with flex is that where you add flex descriptors is very important. Applying flexLayout=column will affect the children components inside the element you placed this on.

‍

As another example of this I can push content to the position I want to within its parent container.

‍

As you can see above, using fxFlex its possible to push the content in the other child div over to the right hand side and position the icons this way.

‍

Conclusion

There are many other properties you can add to your elements in order to get this positioning correct, but I hope this will provide some insight into beginning to understand how to use flex within your project. This gave me a visual understanding that allowed me to very quickly lay out the contents of any application or component I am working on before inserting the content itself.