Initial commit

1 files changed, 62 insertions, 0 deletions

diff --git a/posts/width-vs-flex-basis.md b/posts/width-vs-flex-basis.md
new file mode 100644
index 0000000..534a42f
--- /dev/null
+++ b/posts/width-vs-flex-basis.md
@@ -0,0 +1,62 @@
+# Width or Flex-Basis?
+
+2018-11-28
+
+Creating rows and columns of elements that adapt dynamically can be a little tricky depending on the desired outcome. Let's breakdown how to solve this issue using both `inline-block` paired with `width` and `flex-basis`.
+
+## Width
+
+Setting the width of the inner children to a divisible value and setting their display to `inline-block`, we are able to create self-wrapping elements:
+
+
+    .width-container {
+        display: block;
+    }
+    .width-container__item {
+        display: inline-block;
+        width: calc(33% - 3px); /* Fix for wonky inline-block margins */
+    }
+
+
+### Pros
+
+- <a href="https://caniuse.com/#search=inline-block">Full browser support</a> (as far back as IE6)
+- No floats needed
+
+### Cons
+
+- Buggy `margin` workaround needed
+- Wrapped elements cannot dynamically fill remaining empty parent space
+
+## Flex-basis
+
+This is my personal preference for dynamically wrapping inner children elements. Simply set the parent as `display: flex`, allow flex-wrapping and then set the `flex-basis` of the children to any percentage value.
+
+
+    .flex-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .flex-container__item {
+        flex: 1 1 auto;
+        flex-basis: 33%;
+    }
+
+
+You will also notice the `flex` property set to `1 1 auto`. This is important if you require your wrapped elements to fill the remaining space of the parent container.
+
+### Pros
+
+- No buggy margins to play with
+- Dynamically renders children to fill parent container if `flex` is set
+- Scales well across screen / device sizes
+
+### Cons
+
+- Some versions of IE struggle with <a href="https://caniuse.com/#search=flex-basis">browser support</a>
+
+## CodePen Demo
+
+Feel free to play around with a slightly more stylized version of both options below:
+
+<a href="https://codepen.io/bradleytaunt/pen/JevaYQ">CodePen Demo: Width or flex-basis</a>