From 07e4a2dafe248280b5610f8c7d09b0f30b530f54 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 09:41:25 -0400 Subject: Initial modifications to rebuilt only changed files based on mod date, performance updates --- build/width-vs-flex-basis/index.html | 87 ------------------------------------ 1 file changed, 87 deletions(-) delete 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 deleted file mode 100644 index 94c6e91..0000000 --- a/build/width-vs-flex-basis/index.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - - 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