update flexbox

snippets/flexbox-centering.md

@@ -0,0 +1,52 @@
+### Flexbox centering
+
+Horizontally and vertically centers a child element within a parent element using `flexbox`.
+
+#### HTML
+
+```html
+<div class="flexbox-centering">
+  <div class="child"></div>
+</div>
+```
+
+#### CSS
+
+```css
+.flexbox-centering {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <div class="snippet-demo__flexbox-centering">
+    <p class="snippet-demo__flexbox-centering__child">Centered content.</p>
+  </div>
+</div>
+
+<style>
+.snippet-demo__flexbox-centering {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+</style>
+
+#### Explanation
+
+1. `display: flex` enables flexbox.
+2. `justify-content: center` centers the child horizontally.
+3. `align-items: center` centers the child vertically.
+
+#### Browser support
+
+<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
+
+* https://caniuse.com/#feat=flexbox
+
+<!-- tags: layout -->