Merge pull request #32 from sinout/evenly-distributed-childs

[FEATURE] Adding evenly distributed container childs snippet

snippets/evenly-distributed-children.md

@@ -0,0 +1,53 @@
+### Evenly distributed children
+
+Evenly distributes child elements within a parent element.
+
+#### HTML
+
+```html
+<div class="evenly-distributed-children">
+  <p>Item1</p>
+  <p>Item2</p>
+  <p>Item3</p>
+</div>
+```
+
+#### CSS
+
+```css
+.evenly-distributed-children {
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <div class="snippet-demo__evenly-distributed-children">
+    <p>Item1</p>
+    <p>Item2</p>
+    <p>Item3</p>
+  </div>
+</div>
+
+<style>
+.snippet-demo__evenly-distributed-children {
+  display: flex;
+  width: 100%;  
+  justify-content: space-between;
+}
+</style>
+
+#### Explanation
+
+1. `display: flex` enables flexbox.
+2. `justify-content: space-between` evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
+
+Alternatively, use `justify-content: space-around` to distribute the children with space around them, rather than between them.
+
+#### Browser support
+
+<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
+
+* https://caniuse.com/#feat=flexbox