Align Elements with Ionic v3 Grid
Since Ionic's grid system is built on top CSS's flexbox, we can use the same alignment system it uses. We'll use a three-column grid in a template, along with some content in each column.
You'll learn how to use the Ionic Grid's Flexbox roots to quickly align rows and columns.
Instructor: [00:01] Since Ionic's grid system is built on top CSS's flexbox, we can use the same alignment system it uses. I have a three-column grid already in place in my template, along with some content in each column.
[00:13] I've also added some CSS, so the columns are visible. Now, if I want a row's content to be aligned at the top, I can use the align-item-start directive. If I want the content to be aligned to be the bottom of the row, I can use align-items-end.
[00:35] I can also apply these to individual columns as well. Let's set each column to be different. How about we set the columns to be top, middle, and bottom? That would be align-self-start, align-self-center, and align-self-end.
[00:54] Saving, you can see the results. For horizontal layout, I can add additional directives to do this. Again, these directives mirror the flexbox alignment options. To demonstrate this, I'm going to first reduce the column widths by adding the col- and the number of columns I want.
[01:15] Now, I will apply the justify-content-in directive. Saving, we can see the change. Let me show you another alignment in action. I will change the directive to justify-content-around. Saving, and now the columns have a different alignment altogether.
[01:35] One thing to note with the horizontal alignment options, they will be applied to all the columns. You may need to use other alignment solutions for your content if you need to mix the horizontal alignment of an individual column.