fxLayoutGap API is one of the static API in Angular flex layout. And in this tutorial we will understand how fxLayoutGap will work using simple detailed examples.
Using the Flow Layout. You can arrange items in your collection views using a concrete layout object, the UICollectionViewFlowLayout class. The flow layout implements a line-based breaking layout, which means that the layout object places cells on a linear path and fits as many cells along that line as it can. FlowLayout is doing what it suggests, flowing components left to right till it has no space and then goes on next line, with different layouts you can do what you need. – AbstractChaos Nov 22 '12 at 10:30.
What is fxLayoutGap API?
- fxLayoutGap is used to specify gap between flex children items inside flex container.
- fxLayoutGap is an optional API.
- fxLayoutGap directive should be added to parent container i.e, flex container.
We will create a component called FxLayoutGapExampleComponent in our angular project to understand it further.
fxLayoutGap example
First we will see how children elements inside the container renders without fxLayoutGap directive.
Now we will add a gap between flex children items using fxLayoutGap.
I have added a 20px gap between flex items inside the flex container.
How fxLayoutGap will work?
When we add fxLayoutGap to the parent container, Angular flex layout will add an inline CSS margin-right or margin-bottom to the children items depending upon the flex layout row or column.
The inline CSS will be added to all the children items except last one.
fxLayoutGap with fxLayout row
When we are using fxLayputGap with row layout margin-right inline CSS will be added to the flex children.
Flowlayout
In the above row layout example, I have added a gap of 30px between flex children items using fxLayoutGap.
fxLayoutGap with fxLayout column
When we use fxLayoutGap to the column layout margin-bottom inline CSS will be added to the flex children.
In the above column layout example, A gap of 20px will be added between flex children items as I have added fxLayoutGap as 20px.
fxLayoutGap row wrap
If we are using wrap with fxLayout to wrap the the flex children items inside row or column layout, we should consider fxLayoutGap sizes when adding the flex item sizes for children elements using fxFlex.
Have a look at the below example. We have four flex items and each children has fxFlex of 50%.
Ideally they should align in two columns. But as I gave fxLayoutGap as 30px. All flex items will be aligned in single column.
So using calc function, I am calculating flex item width size by considering fxLayoutGap size so that items will be aligned in two columns.
fxLayoutGap column wrap
Similarly for the column layout also fxLayoutGap will affect the wrapping of elements, if we won’t consider it while giving widths to flex children using fxFlex.
With calc() function and fxLayoutGap width.
fxLayoutGap with row-reverse
Flowlayout Awt
When we add fxLayoutGap in row reverse layout margin-left inline css will be added to the children flex items.
fxLayoutGap with column-reverse
Jpanel Flowlayout Rows Chart
While using fxLayoutGap with column reverse layout margin-top inline css will be added to the children flex items.