From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/width-vs-flex-basis/index.html | 57 ++++++++++++++++++++++++------------ 1 file changed, 39 insertions(+), 18 deletions(-) (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 index 23c19b8..db22f2a 100644 --- a/build/width-vs-flex-basis/index.html +++ b/build/width-vs-flex-basis/index.html @@ -1,44 +1,57 @@ - + Width or Flex-Basis? - - + + +
-

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

+ +

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 */
+    width: calc(33% - 3px); /* Fix for wonky inline-block margins */
 }
 
-

Pros

+ +

Pros

+ -

Cons

+ +

Cons

+ -

Flex-basis

+ +

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;
@@ -48,20 +61,28 @@
     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

+ +

Pros

+ -

Cons

+ +

Cons

+ -

CodePen Demo

+ +

CodePen Demo

+

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

-

CodePen Demo: Width or flex-basis

+ +

CodePen Demo: Width or flex-basis