[YOUR OWN PERSONAL OPINION ON A TOPIC] > [ARTICLE TITLE]: https://[URL] #[HASHTAG] by @[HANDLE]
I ♥ this post by @[HANDLE] - https://[URL] #[HASHTAG]
Don't let your [ASSET] [NEGATIVE RESULT]. Find out how to [GOAL] here: https://[URL] #[HASHTAG]
Extra small gap .flex.gap_xs
Small gap .flex.gap_s
Medium gap .flex.gap_m
Large gap .flex.gap_l
No gutter .flex.gap-no
Horizontally smaller gap
Vertically smaller gap
competently negotiate extensible
- 5 items
- 10 friends
- 10 undoes
progressively pontificate 24/365
- 10 items
- 20 friends
- 20 undoes
- 20 benchmarks
holisticly aggregate data
- 20 items
- 40 friends
- 40 undoes
- 40 benchmarks
- 40 rollbacks
- 80 snapshots
No wrap .flex.wrap-no
↑ Stretched items take all the place. Will not work with gapped flexboxes, as those need to be nested and the strechting only applis to the first child.
↑ Items aligned on the end of the secondary axis.
↑ Items aligned in the middle of the secondary axis.
↑ Items are placed on the end.
↑ Items are placed in the middle.
↑ Items are placed in between, starting at start, ending at end.
↑ Items are played around with some space left on start and end.
↑ All items pushed to the end of the main axis.
↑ All items aligned on the middle of the main axis.
↑ Items are trying to get away from each other, starting at start, ending at end.
↑ Items are trying to get away from each other, with some space left to start and end.
Align self in flexbox row
↑ In a Flexbox row, the main axis is horizontal, so the end is on the right — in case of left to right.
Align self in flexbox column
↑ In a Flexbox column, the main axis is vertical, so the end is on the bottom — in case of top to bottom.
↑ Useful for horizontal navigations.
Vertically and horizontally centered 1
↑ Combines the justify-center items-center on the flex element.
Vertically and horizontally centered 2
↑ Combines span-auto and margin helpers on the element itself.