From 6b7bf382f3bada46ff355dbda6409cc882336698 Mon Sep 17 00:00:00 2001 From: MoOx Date: Wed, 30 Jan 2019 17:17:41 +0100 Subject: [PATCH] Add "space-evenly" to justify-content documentation and adjusts others I wanted to add missing docs for space-evenly, so I simply opened css specs https://drafts.csswg.org/css-align-3/. While I was on it, I tried to simplify space-around description to not have to compare each space-* to each others. Finally, I adjusted flex-* and center by just ripping css specs like I did for the other desc. Feel free to reject some parts of this update. I think some other pages needs the same update. --- .../contents/properties/justify-content.md | 37 ++++++++++++------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/website/contents/properties/justify-content.md b/website/contents/properties/justify-content.md index 84ccb335..f884ea5b 100644 --- a/website/contents/properties/justify-content.md +++ b/website/contents/properties/justify-content.md @@ -6,23 +6,34 @@ hasPlayground: true ## Justify Content -Justify content describes how to align children within the main axis of their container. -For example, you can use this property to center a child horizontally within a container -with `flex direction` set to `row` or vertically within a container with `flex direction` -set to `column`. +Justify content describes how to align children within the main axis of their +container. For example, you can use this property to center a child horizontally +within a container with `flex direction` set to `row` or vertically within a +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 -remaining space between the children. +**SPACE BETWEEN** The children are evenly distributed in the parent. The first +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 -remaining space around the children. Compared to `space between` using -`space around` will result in space being distributed to the beginning of -the first child and end of the last child. +**SPACE AROUND** The children are evenly distributed in the parent, with a +half-size space on either end. The children are distributed so that the spacing +between any two adjacent children is the same, and the spacing before the first +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. -- 2.50.1.windows.1