DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Add "space-evenly" to justify-content documentation and adjusts others #859

Closed
MoOx wants to merge 1 commits from patch-1 into main
pull from: patch-1
merge into: DaddyFrosty:main
Conversation 2 Commits 1 Files Changed 1 +24 -13
1 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
website/contents/properties/justify-content.md
View File

@@ -6,23 +6,34 @@ hasPlayground: true
## Justify Content ## Justify Content
Justify content describes how to align children within the main axis of their container. Justify content describes how to align children within the main axis of their
For example, you can use this property to center a child horizontally within a container container. For example, you can use this property to center a child horizontally
with `flex direction` set to `row` or vertically within a container with `flex direction` within a container with `flex direction` set to `row` or vertically within a
set to `column`. container with `flex direction` set to `column`.
**FLEX START (DEFAULT)** Align children of a container to the start of the container's main axis. **FLEX START (DEFAULT)** Aligns the children to be flush with the edge of the
parent corresponding to the flex container’s main-start or cross-start side, as
appropriate.
**FLEX END** Align children of a container to the end of the container's main axis. **FLEX END** Aligns the children to be flush with the edge of the parent
corresponding to the flex container’s main-end or cross-end side, as
appropriate.
**CENTER** Align children of a container in the center of the container's main axis. **CENTER** Centers the children within its parent.
**SPACE BETWEEN** Evenly space of children across the container's main axis, distributing **SPACE BETWEEN** The children are evenly distributed in the parent. The first
remaining space between the children. child is placed flush with the start edge of the parent, the last child is
placed flush with the end edge of the parent, and the remaining children are
distributed so that the spacing between any two adjacent children is the same.
**SPACE AROUND** Evenly space of children across the container's main axis, distributing **SPACE AROUND** The children are evenly distributed in the parent, with a
remaining space around the children. Compared to `space between` using half-size space on either end. The children are distributed so that the spacing
`space around` will result in space being distributed to the beginning of between any two adjacent children is the same, and the spacing before the first
the first child and end of the last child. and after the last child is half the size of the other spacing..
**SPACE EVENLY** The children are evenly distributed in the parent, with a
full-size space on either end. The children are distributed so that the spacing
between any two adjacent children, before the first child, and after the last
child is the same.
<controls prop="justifyContent"></controls> <controls prop="justifyContent"></controls>