May 21, 2021 ionic
Unlike most other frameworks, ionic uses the Flexible Box Model. A nd on the mobile side, basically mobile phones are supported. The row style specifies the row, and the col style specifies the column.
If the style of col is included in an element with a row style, col is set to the same size.
In the following example, the style of row contains 5 col styles, each with a width of 20%.
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
You can set the size of each column in a row to be different. B y default, columns are divided into the same size. But you can also set the width of the column (12 grids in one behavior) by percentage.
<div class="row"> <div class="col col-50">.col.col-50</div> <div class="col">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-75">.col.col-75</div> <div class="col">.col</div> </div> <div class="row"> <div class="col">.col</div> <div class="col col-75">.col.col-75</div> </div> <div class="row"> <div class="col">.col</div> <div class="col">.col</div> </div>
Note: In the instance, each col style automatically adds a top border and a gray background.
Here are some style names that specify a percentage of column width:
| .col-10 | 10% |
| .col-20 | 20% |
| .col-25 | 25% |
| .col-33 | 33.3333% |
| .col-50 | 50% |
| .col-67 | 66.6666% |
| .col-75 | 75% |
| .col-80 | 80% |
| .col-90 | 90% |
The column can set the left offset, as follows:
<div class="row"> <div class="col col-33 col-offset-33">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-33">.col</div> <div class="col col-33 col-offset-33">.col</div> </div> <div class="row"> <div class="col col-33 col-offset-67">.col</div> </div>
Here are some offset style names for percentages:
| .col-offset-10 | 10% |
| .col-offset-20 | 20% |
| .col-offset-25 | 25% |
| .col-offset-33 | 33.3333% |
| .col-offset-50 | 50% |
| .col-offset-67 | 66.6666% |
| .col-offset-75 | 75% |
| .col-offset-80 | 80% |
| .col-offset-90 | 90% |
The elastic box model makes it easy to set columns to align vertically. Portrait alignment contains the top, middle, bottom, columns that can be applied to each row, or a specified column.
In the instance, the last column sets the highest content for a better presentation portrait alignment grid.
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row"> <div class="col col-top">.col</div> <div class="col col-center">.col</div> <div class="col col-bottom">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-top"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-center"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-bottom"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div>
When the handheld screen is switching, such as horizontal screen, vertical screen, etc. You need to set the grid for each row to achieve adaptive sizes based on different widths.
The styles of the different device responsive classes are as follows:
| Responsive class | Describe |
| .responsive-sm | Smaller than the phone's horizontal screen |
| .responsive-md | Less than the tablet vertical screen |
| .responsive-lg | Less than the flat horizontal screen |
<div class="row responsive-sm"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>