Course Overview: Style and Theme Ionic v3 Applications

Customize Ionic v3 Default Theme Colors

Override Global SASS Variables in Ionic v3 Applications

Set Ionic v3 Config Parameters

Style an Ionic v3 Component on a Single Page

Align and Size Text with Ionic v3 CSS Utilities

Structure an Application UI with Ionic v3 Grid

Lay Out Content with Ionic v3 CSS Utilities

Align Elements with Ionic v3 Grid

First Look: Theming Ionic 4 applications

Style and Theme Ionic v3 Applications

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.

Course

Style and Theme Ionic v3 Applications

Align Elements with Ionic v3 Grid

Share this video with your friends