diff --git a/snippets/evenly-distributed-childs.md b/snippets/evenly-distributed-childs.md new file mode 100644 index 000000000..f2dbabdde --- /dev/null +++ b/snippets/evenly-distributed-childs.md @@ -0,0 +1,54 @@ +### Evenly distributed childs + +Evenly distributed childs within the alignment container + +#### HTML + +```html +
+

Item1

+

Item2

+

Item3

+
+``` + +#### CSS + +```css +.evenly-distributed-childs { + display: flex; + width: 300px; + justify-content: space-between; +} +``` + +#### Demo + +
+
+

Item1

+

Item2

+

Item3

+
+
+ + + +#### Explanation + +1. `display: flex` enables flexbox. +2. `justify-content: space-between` evenly distributes childs in the line. + +First item will be on the start line, last item on the end line + +#### Browser support + +⚠️ Needs prefixes for full support. + +* https://caniuse.com/#feat=flexbox