|
21 | 21 | "Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as \"flex container\") whereas the others are meant to be set on the children (known as \"flex items\").\n", |
22 | 22 | "If regular layout is based on both block and inline flow directions, the flex layout is based on \"flex-flow directions\". Please have a look at this figure from the specification, explaining the main idea behind the flex layout.\n", |
23 | 23 | "\n", |
24 | | - "\n", |
| 24 | + "\n", |
25 | 25 | "\n", |
26 | 26 | "Basically, items will be laid out following either the `main axis` (from `main-start` to `main-end`) or the `cross axis` (from `cross-start` to `cross-end`).\n", |
27 | 27 | "\n", |
|
34 | 34 | "\n", |
35 | 35 | "### Properties of the parent\n", |
36 | 36 | "\n", |
37 | | - "\n", |
| 37 | + "\n", |
38 | 38 | "\n", |
39 | 39 | "\n", |
40 | 40 | "#### display\n", |
|
48 | 48 | "- `flex-direction` (column-reverse | column | row | row-reverse )\n", |
49 | 49 | "\n", |
50 | 50 | " This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.\n", |
51 | | - "\n", |
| 51 | + "\n", |
52 | 52 | "\n", |
53 | 53 | "- `flex-wrap` (nowrap | wrap | wrap-reverse)\n", |
54 | 54 | "\n", |
55 | 55 | " By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.\n", |
56 | | - "\n", |
| 56 | + "\n", |
57 | 57 | "\n", |
58 | 58 | "#### justify-content\n", |
59 | 59 | "\n", |
60 | 60 | "`justify-content` can be one of `flex-start`, `flex-end`, `center`, `space-between`, `space-around`. This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.\n", |
61 | | - " \n", |
| 61 | + " \n", |
62 | 62 | "\n", |
63 | 63 | "#### align-items\n", |
64 | 64 | "\n", |
65 | 65 | "`align-items` can be one of `flex-start`, `flex-end`, `center`, `baseline`, `stretch`. This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).\n", |
66 | | - " \n", |
| 66 | + " \n", |
67 | 67 | " \n", |
68 | 68 | "#### align-content\n", |
69 | 69 | "`align-content` can be one of `flex-start`, `flex-end`, `center`, `baseline`, `stretch`. This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.\n", |
70 | | - "\n", |
| 70 | + "\n", |
71 | 71 | "\n", |
72 | 72 | "**Note**: this property has no effect when there is only one line of flex items.\n", |
73 | 73 | "\n", |
74 | 74 | "### Properties of the items\n", |
75 | 75 | "\n", |
76 | | - "\n", |
| 76 | + "\n", |
77 | 77 | "\n", |
78 | 78 | "The flexbox-related CSS properties of the items have no impact if the parent element is not a flexbox container (i.e. has a `display` attribute equal to `flex` or `inline-flex`).\n", |
79 | 79 | "\n", |
|
89 | 89 | " This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.\n", |
90 | 90 | "\n", |
91 | 91 | " If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).\n", |
92 | | - " \n", |
| 92 | + " \n", |
93 | 93 | "\n", |
94 | 94 | " - `flex-shrink`\n", |
95 | 95 | "\n", |
|
103 | 103 | "\n", |
104 | 104 | "`align-self` allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.\n", |
105 | 105 | "\n", |
106 | | - "\n", |
| 106 | + "\n", |
107 | 107 | "\n", |
108 | 108 | "### The VBox and HBox helpers\n", |
109 | 109 | "\n", |
|
0 commit comments