docs(layout containers) add flexbox layout content #1008
Conversation
There was a problem hiding this comment.
This is excellent @manoldonev. We can merge this after the Angular snippets are merged in.
This doesn’t relate directly to this PR, but I do find it a bit weird that we store a bunch of these snippets in the unit tests of external repositories, as it makes it harder for people to contribute.
docs/ui/layout-containers.md
Outdated
| | alignItems | Gets or sets a value indicating how flex items are laid out along the cross axis on the current line. You can think of it as the justifyContent version for the cross-axis (perpendicular to the main-axis). The alignItems property accepts 5 different values: `flex-start` (cross-start margin edge of the items is placed on the cross-start line), `flex-end` (cross-end margin edge of the items is placed on the cross-end line), `center` (items are centered in the cross-axis), `baseline` (items are aligned such as their baselines align), `stretch` (stretch to fill the container but still respect min-width/max-width). The default value is `stretch`. | | ||
| | alignContent | Gets or sets a value that helps aligning a flex container's lines within it when there is extra space in the cross-axis, similar to how justifyContent aligns individual items within the main-axis. The alignContent property accepts 6 different values: `flex-start` (lines packed to the start of the container), `flex-end` (lines packed to the end of the container), `center` (lines packed to the center of the container), `space-between` (lines evenly distributed; the first line is at the start of the container while the last one is at the end), `space-around` (lines evenly distributed with equal space between them), and `stretch` (lines stretch to take up the remaining space). The default value is `stretch`. This property has no effect when the flexbox has only a single line. | | ||
|
|
||
| > **NOTE:** There is a limitation for `alignItems` in **iOS**, the `baseline` option can **not** be used. |
There was a problem hiding this comment.
There is a limitation for alignItems in iOS—the baseline option can not be used.
Technically using a comma is incorrect here, although it’s not really a big deal.
docs/ui/layout-containers.md
Outdated
| | alignSelf | Gets or sets a value that makes it possible to override the alignItems value for specific flex items. This property accepts the same 5 values as the alignItems: `flex-start` (cross-start margin edge of the item is placed on the cross-start line), `flex-end` (cross-end margin edge of the item is placed on the cross-end line), `center` (item is centered in the cross-axis), `baseline` (items are aligned such as their baseline are aligned), and `stretch` (stretch to fill the container but still respect min-width / max-width). The default value is `stretch`. | | ||
| | flexWrapBefore | Gets or sets a boolean value controlling item wrapping. Setting it to `true` on flexbox item will force it to wrap on a new line. The default value is `false`. This property is not part of the official flexbox specification. | ||
|
|
||
| > **NOTE:** There is a limitation for `alignSelf` in **iOS**, the `baseline` option can **not** be used. |
There was a problem hiding this comment.
Same note as before, switch the comma to an em dash or colon.
manoldonev
force-pushed
the
mdonev/layout-containers-article-update
branch
from
4520900 to
47a7ff7
Compare
|
@tjvantoll removed the commas. |
|
docs |
|
|
@vchimev @etabakov NativeScript/nativescript-angular#1124 has to go first as the flexbox snippets are new. |
|
docs |
|
@vchimev @tjvantoll NativeScript/nativescript-angular#1124 is merged, docs checks passed so I am merging this. |
|
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
I think NativeScript/nativescript-angular#1124 has to be merged first so the ng code snippets can be extracted correctly.