diff options
Diffstat (limited to '_posts/2018-11-28-width-vs-flex-basis.md')
-rw-r--r-- | _posts/2018-11-28-width-vs-flex-basis.md | 65 |
1 files changed, 0 insertions, 65 deletions
diff --git a/_posts/2018-11-28-width-vs-flex-basis.md b/_posts/2018-11-28-width-vs-flex-basis.md deleted file mode 100644 index 260668d..0000000 --- a/_posts/2018-11-28-width-vs-flex-basis.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -layout: post -title: "Width or Flex-Basis?" -date: 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> |