From dc6db80fa72286704849ef61ee0e5ccb5841cb09 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:28:49 -0400 Subject: Conversion to barf for testing purposes --- _posts/2018-11-28-width-vs-flex-basis.md | 65 -------------------------------- 1 file changed, 65 deletions(-) delete mode 100644 _posts/2018-11-28-width-vs-flex-basis.md (limited to '_posts/2018-11-28-width-vs-flex-basis.md') 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 - -- Full browser support (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 browser support - -## CodePen Demo - -Feel free to play around with a slightly more stylized version of both options below: - -CodePen Demo: Width or flex-basis -- cgit v1.2.3-54-g00ecf