javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(grid): update usage from attributes to classes (#20492)

Browse Source 
closes ionic-team/ionic-docs#1230
This commit is contained in:
Brandy Carney
2020-02-14 12:45:46 -05:00
committed by GitHub
parent c4fb31403e
commit 27a219874c
4 changed files with 22 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/col/readme.md
View File

@ -6,19 +6,9 @@ They will expand to fill their row. All content within a grid should go inside o
See [Grid Layout](/docs/layout/grid) for more information.
## Column attributes
By default, columns will stretch to fill the entire height of the row.
There are several attributes that can be added to a column to customize this behavior.
| Property | Description |
|-----------------------|-------------------------------------------------------------------------------------------------------------|
| align-self-start | Adds `align-self: flex-start`. The column will be vertically aligned at the top. |
| align-self-center | Adds `align-self: center`. The column will be vertically aligned in the center. |
| align-self-end | Adds `align-self: flex-end`. The column will be vertically aligned at the bottom. |
| align-self-stretch | Adds `align-self: stretch`. The column will be stretched to take up the entire height of the row. |
| align-self-baseline | Adds `align-self: baseline`. The column will be vertically aligned at its baseline. |
## Column Alignment
By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior.
<!-- Auto Generated Below -->