mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
a7f1f4daa7
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
ion-row
Rows are horizontal components of the grid system and contain varying numbers of columns. They ensure the columns are positioned properly.
See Grid Layout for more information.
Row attributes
By default, columns will stretch to fill the entire height of the row and wrap when necessary. There are several attributes that can be added to a row to customize this behavior.
| Property | Description |
|---|---|
| nowrap | Adds flex-wrap: nowrap. Forces the columns to a single row. |
| wrap-reverse | Adds flex-wrap: wrap-reverse. The columns will wrap in reverse. |
| align-items-start | Adds align-items: flex-start. All columns will be vertically aligned at the top, unless they specify their own alignment. |
| align-items-center | Adds align-items: center. All columns will be vertically aligned in the center, unless they specify their own alignment. |
| align-items-end | Adds align-items: flex-end. All columns will be vertically aligned at the bottom, unless they specify their own alignment. |
| align-items-stretch | Adds align-items: stretch. All columns will be stretched to take up the entire height of the row, unless they specify their own alignment. |
| align-items-baseline | Adds align-items: baseline. All columns will be vertically aligned at their baselines, unless they specify their own alignment. |
| justify-content-start | Adds justify-content: start. All columns will be horizontally aligned at the start. |
| justify-content-center | Adds justify-content: center. All columns will be horizontally aligned at the center. |
| justify-content-end | Adds justify-content: end. All columns will be horizontally aligned at the end. |
| justify-content-around | Adds justify-content: space-around. All columns will be horizontally aligned with equal space around them. |
| justify-content-between | Adds justify-content: space-between. All columns will be horizontally aligned with a half-size space on either end. |
Built with StencilJS