From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- build/width-vs-flex-basis/index.html | 85 ++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 build/width-vs-flex-basis/index.html (limited to 'build/width-vs-flex-basis/index.html') diff --git a/build/width-vs-flex-basis/index.html b/build/width-vs-flex-basis/index.html new file mode 100644 index 0000000..23c19b8 --- /dev/null +++ b/build/width-vs-flex-basis/index.html @@ -0,0 +1,85 @@ + + + + + + + Width or Flex-Basis? + + + + + + +
+

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

+ +

Cons

+ +

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

+ +

Cons

+ +

CodePen Demo

+

Feel free to play around with a slightly more stylized version of both options below:

+

CodePen Demo: Width or flex-basis

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf